背景图片透明内容不透明-css3阴影-文字渐变

最新推荐文章于 2024-06-21 11:27:52 发布

hqin_520

最新推荐文章于 2024-06-21 11:27:52 发布

阅读量1.8k

点赞数 1

分类专栏：笔记 css

本文链接：https://blog.csdn.net/hqin_520/article/details/105634100

版权

笔记同时被 2 个专栏收录

28 篇文章 0 订阅

订阅专栏

css

5 篇文章 0 订阅

订阅专栏

小白想记录一些曾经遇到的问题，为什么是曾经呢，哈哈哈，主要小白今天没什么工作，所以来温故知新一下。

一、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背景渐变

![在这里插入图片描述](https://img-blog.csdnimg.cn/20200420151300803.png

<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

hqin_520

关注

1
点赞
踩
5

收藏

觉得还不错? 一键收藏
0
评论
背景图片透明内容不透明-css3阴影-文字渐变

小白想记录一些曾经遇到的问题，为什么是曾经呢，哈哈哈，主要小白今天没什么工作，所以来温故知新一下。一、css实现背景图片透明，但是内容不透明想要设置透明度，有两种办法opacity和rgba。但是呢直接使用这两种办法会导致背景图片和内容一起变成透明。所以得换一种思路。法一：该方法采用中间层的概念，在背景图和内容层之间加了一个膜，以达到这样的效果。下面上代码：html代码：<...
复制链接

扫一扫