css为图片底部添加滤镜放置文字

最新推荐文章于 2023-03-04 23:06:37 发布

To无忧

最新推荐文章于 2023-03-04 23:06:37 发布

阅读量479

点赞数

文章标签： css css3 html

本文链接：https://blog.csdn.net/qq_46274532/article/details/123462815

版权

在这里插入图片描述
看了开课吧官网写的，但这个设计更漂亮。

在这里插入图片描述

html代码

<div class="imageDiv">
	<div class="image"></div>
 </div>

css代码

.imageDiv {
     background-image: url('../assets/images/music.jpg') ;
     // 以父元素的百分比来设置背景图像的宽度和高度。
     background-size: auto 100% ;
     // 设置背景图像的起始位置
     background-position: 50% ;
}
.image {
    width: 100%;
    height: 100%;
    background: linear-gradient(180deg,rgba(25,31,41,0),#191445);
}