使用类选择器在div块实现透明背景（包含实例代码）

最新推荐文章于 2023-10-27 18:05:46 发布

非生而知之者

最新推荐文章于 2023-10-27 18:05:46 发布

阅读量623

点赞数 1

分类专栏： aJanm的web探险之旅文章标签： css html

本文链接：https://blog.youkuaiyun.com/qq_41904864/article/details/105476869

版权

aJanm的web探险之旅专栏收录该内容

4 篇文章

订阅专栏

前言

实现

前言

如下所示，我在看别人的网站源代码时我想要实现图右红框框出来的蓝底的阴影部分，这样的话块与块之间的间隔就更加明显，于是我查看网页的源代码，如图二所示。

然后我发现这个是由"<div class="block">"来实现的，如图中下面的红色方框所示，当时我认为"block"这个类是JavaScript自带的，然后我现在已经找到了这个类，那么我只需要在我自己想要的地方直接定义，那应该也可以实现阴影效果。

哈哈经过时间后发现，"block"实际上这个并不是JavaScript自带的，而是网页的作者自己写在css样式里面的一个类选择器，下面我们就来实现它。

实现

实现代码如下相关解释，请看注释。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!--  注意样式要写在style里面，并加上type="text/css"
          当然如果涉及很多类选择器的话，可以另外新建一个css文件，
          然后再引用这个文件.
     -->
    <style type="text/css">
        .block{
            background-color:  rgba(156,234,223, 0.2);
            /*  设置背景颜色，4个参数分别代表红绿蓝和透明度的值*/
            text-align: center;
        }
    </style>
</head>
<body>
    <div class="block">
        <p>这是一个类选择器</p>
    </div>
</body>
</html>

结果如下：