How to Display Half of Background [duplicate]

Question

How to Display Half of Background [duplicate]

Navigation

#1 by (2 votes)
#2 by (0 votes)

0

I have two <div> , one is superimposed on another. And I need the one on top, just show half of the background . That is, the other half will be transparent so that the other half of the <div> underneath is visible.

Note: <div> has to be on top of the other in full, I only need background in half.

 <div id="coberturas">
    <h2> Coberturas </h2>
   <div class="sp"></div>
    <ul>
     <a href="fotos.php?id=<?php echo $row_RS_coberturas['id']; ?>">   <li><img src="imagens/01.jpg"  width="320" height="320" /> <br/>
        <legend> <span>29/05/2015 - TUPACIGUARA MG</span> <br /> <h1>EXPO CAPITU</h1></legend></li></a>
    </ul>
</div>

CSS:

#coberturas legend{
font:Lucida Sans;   
padding:10px 20px;
    display:block;
    position:absolute;
    bottom:0;
    box-sizing: border-box;
    background-color:#FF9911;

    width:320px;



}
#coberturas legend a{
text-decoration:none;
font-family: 'Lato', Calibri, Arial, sans-serif;
background-color:rgba(0,210,210,0);
color:rgba(0,210,210,1);
color:#FFFFFF;
}
#coberturas legend h1{
position:relative;
font:Trebuchet; 
margin-top:3px;
font-size:22px;
color:#FFFFFF;
}
#coberturas legend:hover{opacity: 1;
background-color:#FF6600;


}
#coberturas ul{
margin-left:-30px;
margin-top:20px;
}
#coberturas img{
border: 0;
    display:block;
    transition:all 0.3s;
    -webkit-transition:all 0.3s;
}
#coberturas img:hover{
opacity:0.8;
-ms-transform: scale(0.98); /* IE 9 */
-webkit-transform: scale(0.98); /* Chrome, Safari, Opera */
transform: scale(0.98);


}
#coberturas a:hover{
background-color:#FF6600;
opacity:0.8;
-ms-transform: scale(1.03); /* IE 9 */
    -webkit-transform: scale(1.03); /* Chrome, Safari, Opera */
    transform: scale(1.03)

}

html css

asked by anonymous 26.06.2015 / 18:30

2 answers

minSdkVersion error 1 can not be smaller than version 4 How to set a timeout for a given action in Java?

score 2 · Answer 1

You can use the gradient technique, where in background-image you use linear-gradient (which may not work in some older browsers), to make your background half transparent and half visible (50%), with div still able to completely cover the other.

Here is a simple example of how it can be done:

Where div background is red and half of div higher is black.

div.fundo {
  height: 100px;
  background-color: red;
}
div.metade {
  height: 100px;
  /* background com metade transparente horizontal */
  background-image: linear-gradient(to right, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0) 50%, rgb(0, 0, 0) 50%, rgb(0, 0, 0) 100%, rgba(0, 0, 0, 0) 100%);
}

<div class="fundo">
  <div class="metade">
  </div>
</div>

Example also in jsFiddle.

score 0 · Answer 2

I do not know if it's valid in your problem, but I used transform to solve it.

Both divs have the same dimensions, but the second with the transform is reduced to 50% of its size.

If the content is strange I recommend using this background in a :: before.

::before {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;

    [atributos de background do .content]

.container {
  width: 500px;
  height: 300px;
  background-image: url("http://lorempixel.com/500/300/sports");
}
.container .content {
  width: 500px;
  height: 300px;
  background-color: rgba(0, 0, 0, .8);
  -webkit-transform-origin: top;
      -ms-transform-origin: top;
          transform-origin: top;
  -webkit-transform: scaleY(0.5);
      -ms-transform: scaleY(0.5);
          transform: scaleY(0.5);
}

<div class="container">
  <div class="content"></div>
</div>