介绍
不透明度是一种 CSS 属性,允许您更改元素的不透明度. 默认情况下,所有元素的值为1。
一个常见的用例是使用图像作为背景的一部分。调整不透明度可以提高文本的可读性或达到所需的外观。
在本文中,您将介绍两种方法来处理背景图像的这种局限性。
前提条件
如果您想跟随这篇文章,您将需要:
- 熟悉[`不透明 ' (https://developer.mozilla.org/en-US/docs/Web/CSS/opacity)。
- 熟悉
位置:相对 和位置:绝对 。 - 熟悉上下文和`z-index'
- 熟悉
:在之前和`之后'的伪要点。 .
方法 1 — 使用单独的图像元素和定位
第一种方法将依赖于两种元素:一种是包装,提供一个与位置:相对的参考点;第二种是img元素,在内容背后出现位置:绝对和堆积背景。
以下是此方法的标记的例子:
1<div class="demo-wrap">
2 <img
3 class="demo-bg"
4 src="https://cdn.jsdelivr.net/gh/andsky/tutorials-images/labs/images/community_bg.png"
5 alt=""
6 >
7 <div class="demo-content">
8 <h1>Hello World!</h1>
9 </div>
10</div>
以下是伴随的风格:
1.demo-wrap {
2 overflow: hidden;
3 position: relative;
4}
5
6.demo-bg {
7 opacity: 0.6;
8 position: absolute;
9 left: 0;
10 top: 0;
11 width: 100%;
12 height: auto;
13}
14
15.demo-content {
16 position: relative;
17}
此标记和样式将产生图像顶部的文本结果:
Hello World!
母体demo-wrap``<div>建立一个包含区块的绝对定位。demo-bg``<img>设置为位置:绝对,并分配一个轻微的不透明度。demo-content``<div>设置为位置:相对,由于标记的安排方式,它具有比demo-bg更高的堆积背景。
这种方法有一些限制. 假设您的图像足够大,可以容纳任何元素的大小. 您可能需要执行大小限制,以防止图像出现切断或不覆盖一个元素的整个高度. 如果您想要控制背景位置并且没有清洁的背景重复替代方案,还需要额外的调整。
方法 2 — 使用 CSS 伪元素
第二种方法将依赖于伪元素。对于大多数元素来说,:之前和之后伪元素可用。 通常,你会提供一个内容值,并使用它在开始或结束时添加额外的文本。
以下是此方法的标记的例子:
1<div class="demo-wrap">
2 <div class="demo-content">
3 <h1>Hello World!</h1>
4 </div>
5</div>
以下是伴随的风格:
1.demo-wrap {
2 position: relative;
3}
4
5.demo-wrap:before {
6 content: ' ';
7 display: block;
8 position: absolute;
9 left: 0;
10 top: 0;
11 width: 100%;
12 height: 100%;
13 opacity: 0.6;
14 background-image: url('labs/images/community_bg.png');
15 background-repeat: no-repeat;
16 background-position: 50% 0;
17 background-size: cover;
18}
19
20.demo-content {
21 position: relative;
22}
此标记和样式将产生图像顶部的文本结果:
Hello World!
母体demo-wrap``<div>建立一个含有块的绝对定位,伪元素:前设置为位置:绝对,分配一个轻微的不透明度,并使用背景大小:覆盖来占用所有可用的空间。
这种方法有支持其他)。
结论
在本文中,您了解了两种方法来处理背景图像的这种局限性。
如果您想了解更多关于CSS的信息,请参阅我们的CSS主题页面(https://andsky.com/tags/css)以获取练习和编程项目。