How to Show Half of Background

Asked

Viewed 286 times

1

I have two <div>, One is superimposed on the other. And I need the one on top to only show half the background. That is, the other half will be transparent so that the other half of <div> low-visible.

Obs: the <div> has to be on top of each other completely, I just need the background stay halfway.

 <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

  • post your code and where you’re having trouble, so we can help you

  • That question is a duplicate of: http://answall.com/questions/71208/como-display-somente-metade-do-background-color-da-div

  • Do not duplicate the questions, please try my answer: http://answall.com/a/71389/3635 I have already voted to reopen the other question

2 answers

2

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

Here’s a simple example of how it can be done:

Where the div background is red and half of the div upper 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.

0

I do not know if it is valid in your problem, but I used Transform to solve it.

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

In case the content gets weird 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>

Browser other questions tagged html css

You are not signed in. Login or sign up in order to post.