微慑信息网

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的直接子类,但同样变为绿色,说明这种带空格的选择器可以包含间接的后代。

 

赞(0) 打赏
转载请附本站链接,未经允许不得转载,,谢谢:微慑信息网-VulSee.com » CSS记录

评论 抢沙发

微慑信息网 专注工匠精神

微慑信息网-VulSee.com-关注前沿安全态势,聚合网络安全漏洞信息,分享安全文档案例

访问我们联系我们

觉得文章有用就打赏一下文章作者

非常感谢你的打赏,我们将继续提供更多优质内容,让我们一起创建更加美好的网络世界!

支付宝扫一扫打赏

微信扫一扫打赏

登录

找回密码

注册