背景图片透明内容不透明-css3阴影-文字渐变
小白想记录一些曾经遇到的问题,为什么是曾经呢,哈哈哈,主要小白今天没什么工作,所以来温故知新一下。
一、css实现背景图片透明,但是内容不透明
想要设置透明度,有两种办法opacity和rgba。但是呢直接使用这两种办法会导致背景图片和内容一起变成透明。所以得换一种思路。
法一:
该方法采用中间层的概念,在背景图和内容层之间加了一个膜,以达到这样的效果。下面上代码:
html代码:
<body>
<div class="father">
<div class="middle">
<div class="son">这里是内容部分</div>
</div>
</div>
</body>
css代码:
*{
margin: 0;
padding: 0;
}
.father {
width: 100%;
height: 100vh;
background: url('./bg.jpg') no-repeat;
position: relative;
}
.middle{
width: 100%;
height: 100%;
background: rgba(255, 255, 255, 0.6);
}
.son {
width: 200px;
height: 70px;
font-size: 20px;
text-align: center;
margin: auto auto;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
}
法二:
跟法一是异曲同工,概念一样的,只是这个是用伪类去实现。这种方法呢,可以直接使用一个div去实现这样的效果,思想都是一样的。
html代码:
<body>
<div class="father">
<div class="son">这里是内容部分</div>
</div>
</body>
css代码:
* {
margin: 0;
padding: 0;
}
.father {
width: 100%;
height: 100vh;
background: url('./bg.jpg') no-repeat;
position: relative;
}
.father::before {
content: "";
width: 100%;
height: 100vh;
position: absolute;
top: 0px;
left: 0px;
background: rgba(255, 255, 255, 0.6);
}
.son {
width: 200px;
height: 70px;
font-size: 20px;
text-align: center;
margin: auto auto;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
background: mediumpurple;
}
这里既然提到了背景,可以在这里记录一下关于css3背景的新用法:
1、可以使用多张背景图
background-image:url(bg_flower.gif),url(bg_flower_2.gif);
2、 规定背景的绘制区域。
background-clip: border-box|padding-box|content-box;
3、 规定背景图片的定位区域。
background-origin: padding-box|border-box|content-box;
二、css3阴影的应用
之前小白我使用阴影每次都是试出来的????,虽然说前端样式本来就是调出来的,在这里主要想记录一下box-shadow的值的含义,下次一看到某种效果,可以直接写出来。
box-shadow: h-shadow v-shadow blur spread color inset;
h-shadow: 水平偏移量,正数就向右偏,负数就向左偏
v-shadow: 水平偏移量,正数就向下偏,负数就向上偏
blur: 模糊大小
spread: 阴影的尺寸
color: 阴影的颜色
inset: 内部阴影, outset: 外部阴影.
eg:
<div class="box"> </div>
.box {
width: 200px;
height: 100px;
background: goldenrod;
box-shadow: 10px 10px 5px 5px #ccc;
margin: 20px auto;
}
==值得注意:==不管是偏移量还是尺寸大小,都得带上单位。
三、文字颜色渐变
这个效果比较好玩,虽然实际项目上可能应用很少,但是小白可以用到自己的网站上,还是很有意思的。主要就是应用background和mask这两个属性
法一:background背景渐变
<div class="box">你今天吃了吗?</div>
.box {
width: 200px;
height: 100px;
margin: 20px auto;
background-image: linear-gradient(to right, red, blue);
-webkit-background-clip: text;
color: transparent;
font-size: 24px;
}
法二:masks
从兼容性可以看到,兼容不怎么好,所以想要了解此方法请到原作者处,连接在最底部。
参考连接:
https://www.w3school.com.cn/css3/css3_background.asp
https://segmentfault.com/a/1190000011882933
上一篇: 两秒搞定苹果Mac系统语言更换的教程