背景图像css顶部和底部的透明渐变

Question

问

背景图像css顶部和底部的透明渐变

caozhengweile_854 发布于 2023-02-12 14:32

是否可以在背景图像的顶部和底部放置透明渐变？目前我只能在其中一个上找到它.

更新:

通过在应用背景图像的区域中放置2来尝试然后使用两个类(一个与另一个相反以尝试创建期望的效果但是它没有完全锻炼.如果可能的话我也会喜欢它它不影响任何其他内容,它在应用的部分内定位.

CSS

.picture-gradient {
z-index: 1;
height: 50px;
width: auto;
position: relative;
background: -webkit-linear-gradient(rgba(64,64,64,1), rgba(64,64,64,0)); 
background: -o-linear-gradient(rgba(64,64,64,1), rgba(64,64,64,0)); 
background: -moz-linear-gradient(rgba(64,64,64,1), rgba(64,64,64,0)); 
background: linear-gradient(rgba(64,64,64,1), rgba(64,64,64,0));
padding: 15px;
margin: -15px;
}

.picture-gradient2 {
z-index: 1;
height: 50px;
width: auto;
position: relative;
background: -webkit-linear-gradient(rgba(64,64,64,0), rgba(64,64,64,1)); 
background: -o-linear-gradient(rgba(64,64,64,0), rgba(64,64,64,1)); 
background: -moz-linear-gradient(rgba(64,64,64,0), rgba(64,64,64,1)); 
background: linear-gradient(rgba(64,64,64,0), rgba(64,64,64,1)); 
padding: 15px;
margin: -15px;
}

HTML(基本)


    

    enter code here

    
        Text
        More Text

xec.. 11

你可以在渐变中有多个止点,所以如果你想让前10%淡入淡出而最后10%淡出淡出,你可以这样做:

background-image: linear-gradient(
    to bottom,
    rgba(64, 64, 64, 1) 0%,
    rgba(64, 64, 64, 0) 10%,
    rgba(64, 64, 64, 0) 90%,
    rgba(64, 64, 64, 1) 100%
);

带标签的演示:http://jsfiddle.net/sh6Hh/或没有额外的

:http://jsfiddle.net/sh6Hh/262/

演示与css背景图片:http://jsfiddle.net/sh6Hh/1/

1 个回答

你可以在渐变中有多个止点,所以如果你想让前10%淡入淡出而最后10%淡出淡出,你可以这样做:
```
background-image: linear-gradient(
    to bottom,
    rgba(64, 64, 64, 1) 0%,
    rgba(64, 64, 64, 0) 10%,
    rgba(64, 64, 64, 0) 90%,
    rgba(64, 64, 64, 1) 100%
);
```
带<img>标签的演示:http://jsfiddle.net/sh6Hh/或没有额外的<div>:http://jsfiddle.net/sh6Hh/262/

演示与css背景图片:http://jsfiddle.net/sh6Hh/1/
2023-02-12 14:35 回答

手机用户2502858281

撰写答案

今天，你开发时遇到什么问题呢？

立即提问

热门标签