背景图片透明内容不透明-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系统语言更换的教程