Can I set an opacity only to the background image of a div?

后端 未结 8 1304
轮回少年
轮回少年 2020-11-22 11:09

Let\'s say I have

Hi there

I want to put a background-image and give it an opacit

相关标签:
8条回答
  • 2020-11-22 11:47

    Nope, this cannot be done since opacity affects the whole element including its content and there's no way to alter this behavior. You can work around this with the two following methods.

    Secondary div

    Add another div element to the container to hold the background. This is the most cross-browser friendly method and will work even on IE6.

    HTML

    <div class="myDiv">
        <div class="bg"></div>
        Hi there
    </div>
    

    CSS

    .myDiv {
        position: relative;
        z-index: 1;
    }
    
    .myDiv .bg {
        position: absolute;
        z-index: -1;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        background: url(test.jpg) center center;
        opacity: .4;
        width: 100%;
        height: 100%;
    }
    

    See test case on jsFiddle

    :before and ::before pseudo-element

    Another trick is to use the CSS 2.1 :before or CSS 3 ::before pseudo-elements. :before pseudo-element is supported in IE from version 8, while the ::before pseudo-element is not supported at all. This will hopefully be rectified in version 10.

    HTML

    <div class="myDiv">
        Hi there
    </div>
    

    CSS

    .myDiv {
        position: relative;
        z-index: 1;
    }
    
    .myDiv:before {
        content: "";
        position: absolute;
        z-index: -1;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        background: url(test.jpg) center center;
        opacity: .4;
    }
    

    Additional notes

    Due to the behavior of z-index you will have to set a z-index for the container as well as a negative z-index for the background image.

    Test cases

    See test case on jsFiddle:

    • Using CSS 2.1 :before
    • Using CSS 3 ::before
    0 讨论(0)
  • 2020-11-22 11:48

    So here is an other way:

    background-image: linear-gradient(rgba(255,255,255,0.5), rgba(255,255,255,0.5)), url("your_image.png");
    
    0 讨论(0)
  • 2020-11-22 11:48
    <!DOCTYPE html>
    <html>
    <head></head>
    <body>
    <div style=" background-color: #00000088"> Hi there </div>
    <!-- #00 would be r, 00 would be g, 00 would be b, 88 would be a. -->
    </body>
    </html>
    

    including 4 sets of numbers would make it rgba, not cmyk, but either way would work (rgba= 00000088, cmyk= 0%, 0%, 0%, 50%)

    0 讨论(0)
  • 2020-11-22 11:51

    This can be done by using the different div class for the text Hi There...

    <div class="myDiv">
        <div class="bg">
       <p> Hi there</p>
    </div>
    </div>
    

    Now you can apply the styles to the

    tag. otherwise for bg class. I am sure it works fine

    0 讨论(0)
  • 2020-11-22 12:02

    Hello to everybody I did this and it worked well

    	var canvas, ctx;
    
    		function init() {
    			canvas = document.getElementById('color');
    			ctx = canvas.getContext('2d');
    
    			ctx.save();
    			ctx.fillStyle = '#bfbfbf'; //  #00843D   // 118846
    			ctx.fillRect(0, 0, 490, 490);
    			ctx.restore();
    		}
    section{
    		height: 400px;
    		background: url(https://images.pexels.com/photos/265087/pexels-photo-265087.jpeg?w=1260&h=750&auto=compress&cs=tinysrgb);
    		background-repeat: no-repeat;
    		background-position: center;
    		background-size: cover;
    		position: relative;
    	
    }
    
    canvas {
    	width: 100%;
    	height: 400px;
    	opacity: 0.9;
    
    }
    
    #text {
    	position: absolute;
    	top: 10%;
    	left: 0;
    	width: 100%;
    	text-align: center;
    }
    
    
    .middle{
    	text-align: center;
    	
    }
    
    section small{
    	background-color: #262626;
    	padding: 12px;
    	color: whitesmoke;
      letter-spacing: 1.5px;
    
    }
    
    section i{
      color: white;
      background-color: grey;
    }
    
    section h1{
      opacity: 0.8;
    }
    <html lang="en">
    <head>
    	<meta charset="UTF-8">
    	<title>Metrics</title>
    	<meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">  
    </head>  
      
    <body onload="init();">
    <section>
    <canvas id="color"></canvas>
    
    <div class="w3-container middle" id="text">
    <i class="material-icons w3-highway-blue" style="font-size:60px;">assessment</i>
    <h1>Medimos las acciones de tus ventas y disenamos en la WEB tu Marca.</h1>
    <small>Metrics &amp; WEB</small>
    </div>
    </section> 

    0 讨论(0)
  • 2020-11-22 12:07

    I implemented Marcus Ekwall's solution but was able to remove a few things to make it simpler and it still works. Maybe 2017 version of html/css?

    html:

    <div id="content">
      <div id='bg'></div>
      <h2>What is Lorem Ipsum?</h2>
      <p><strong>Lorem Ipsum</strong> is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen
        book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with
        desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
    </div>
    

    css:

    #content {
      text-align: left;
      width: 75%;
      margin: auto;
      position: relative;
    }
    
    #bg {
      position: absolute;
      top: 0;
      bottom: 0;
      left: 0;
      right: 0;
      background: url('https://static.pexels.com/photos/6644/sea-water-ocean-waves.jpg') center center;
      opacity: .4;
      width: 100%;
      height: 100%;
    }
    

    https://jsfiddle.net/abalter/3te9fjL5/

    0 讨论(0)
提交回复
热议问题