Đã đăng vào thg 11 24, 2016 8:58 CH 1 phút đọc
With CSS and CSS3 you can do a lot of things, but setting an opacity on a CSS background is not one of them. However, if you get creative, there are a ton of
creative work-arounds you to make it seem like you’re changing the CSS background image’s opacity. Both of the following methods have excellent browser support down to Internet Explorer 8. Method 1: Use absolute positioning and an imageThis method is exactly like it sounds. You simply use absolute positioning on an a normal img tag and make it seem like you used the CSS background-image property. All you have to do is put the image inside of a position: relative; container.
Here’s what the HTML markup generally looks like:
<div class="my-container">
<h2>Scotch Scotch Scotch</h2>
<img src="http://placekitten.com/1500/1000">
</div>
And here’s what your CSS will look like:
.my-container {
position: relative;
overflow: hidden;
}
.my-container h2 {
padding: 200px;
position: relative;
z-index: 2;
}
.my-container img {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: auto;
opacity: 0.6;
}
Finally, here’s a nice little demo on CodePen: http://codepen.io/ncerminara/pen/tncAi Method 2: Using CSS Pseudo-ElementsThis method is seems simple once you see it, and is definitely my preferred method of doing this. Using CSS pseudo-elements of either :before or :after , you a div with a background image and set an opacity on it. Here’s what your HTML markup
would roughly look like:
<div class="my-container">
<h2>Scotch Scotch Scotch</h2>
</div>
And here’s what the CSS looks like:
.my-container {
position: relative;
background: #5C97FF;
overflow: hidden;
}
/* You could use :after - it doesn't really matter */
.my-container:before {
content: ' ';
display: block;
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
z-index: 1;
opacity: 0.6;
background-image: url('http://placekitten.com/1500/1000');
background-repeat: no-repeat;
background-position: 50% 0;
-ms-background-size: cover;
-o-background-size: cover;
-moz-background-size: cover;
-webkit-background-size: cover;
background-size: cover;
}
Finally, here’s a nice little demo of this method: data-theme-id=”0″ data-slug-hash=”eFzJI” data-default-tab=”result” data-user=”ncerminara” class=’codepen’> See the Pen How to Change a CSS Background Image’s Opacity by Nicholas Cerminara (@ncerminara) on CodePen. https://scotch.io/tutorials/how-to-change-a-css-background-images-opacity
All rights reserved
|