微慑信息网

CSS记录

css 实现背景图片平铺整个屏幕

#app{ background-image: url(" img/1.jpg ");
    background-repeat: no-repeat;   //不重复
    background-size: 100% 100%;     // 满屏
}

透明度

img {
  opacity: 0.5;
}

背景图加透明度

CSS 中无法直接给背景图片加 opacity 属性,可以使用下面的方法绕过这个限制:

div {
  width: 200px;
  height: 200px;
  display: block;
  position: relative;
}

div::after {
  content: "";
  background: url(image.jpg);
  opacity: 0.5;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  position: absolute;
  z-index: -1;   
}

CSS中定义CLASS时,中间有空格和每空格的区别

<style>
.e1.e2
{
background-color:yellow;
}
.father .e3
{
background-color:green;
}
</style>
</head>

<body>
<div class="father">
<p class="e1 e2">我住在 Duckburg。</p>
<p class="e3">我也住在 Duckburg。</p>
<div><p class="e3">他也住在 Duckburg。</p></div>
</div>
</body>

上面的代码中第一个段落p有两个class,e1和e2,注意,class属性的空格和css的空格不一个意思的,class属性的空格是“且”的关系,而刚说的css的空格是“父代与后代”的关系。

第一个p被渲染为了黄色,是因为css用了.e1.e2的选择器给他设定了这个颜色,就是这个段落同时有这两个类。当然,css里面不用.e1.e2只用.e1也可以实现同样的效果,不过有些时候我们不希望css选择器误命中其它的标签,就这么细写了。

第二p被.father .e3渲染为了绿色,是因为这p的class是e3,而且是class为father的标签的后代,所以被染为绿色。

同理,第三个p,虽然不是father的直接子类,但同样变为绿色,说明这种带空格的选择器可以包含间接的后代。

 

本文标题:CSS记录
本文链接:
(转载请附上本文链接)
http://vulsee.com/archives/vulsee_2021/0906_14683.html
转载请附本站链接,未经允许不得转载,,谢谢:微慑信息网-VulSee.com » CSS记录
分享到: 更多 (0)

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

微慑信息网 专注工匠精神

访问我们联系我们