美图秀秀怎么添加渐变色背景 css背景图片渐变色怎么设置 _生活百科

第十二篇：添加竖线及图片
本篇的问题有：
1，如何添加一个比边框短的边框线？
使用一个块元素，宽度设置小点，然后高度设置为需要的线长，再为块添加左侧框线，就可以了。
2，如何设置背景渐变色？
使用background:linear-gradient(to top,rgba(255,255,255,0.15),blue); 就可以实现了。
【美图秀秀怎么添加渐变色背景 css背景图片渐变色怎么设置】背景色：线性渐变（到顶部，底部颜色，顶部颜色），因为为了实现透明的渐变，所以使用了rgba颜色，这样就可以实现透明效果了。
3，如何导入图片？
使用<img src="https://www.08ts.cn/images/电气学院.png">
4，如何设置图片不随内容移动？
background-attachment: fixed图片是否随鼠标移动:随鼠标移动。
上篇我们尝试了添加竖线，发现竖线比较长，而北大的比较短，添加框线看起来不是很成功，那么经过查找，有人建议说中间添加一个元素，设置的高短一点即可。我来尝试下。

文章插图
添加上之后，没有效果，加上边框线。

文章插图
边框线添加了之后。

文章插图
可以看出，长度是没有什么了，但是顶在了最上边，没有居中。
那么添加一个10px的上边距，让它强制居中。

文章插图
使用了margin-top，就是上边距。因为高是45px，元素高度是25px，余下20px，两端各分10px 。

文章插图
嗯，这就基本上有那个意思了。其余的都添加一下。然后把下侧标题栏设置的字体加大一下。

文章插图
经过反复测试对比，使用18px字体会一致一些。然后看他们字体有加粗，搜一下加粗的样式。

文章插图
使用的样式是：font-weight: 600;

文章插图
字体的样式差不多了，接着是吧logo图片导入到标题的那个logo框中，因为是可以可看到背景图，所以logo需要使用png或者GIF格式的，这样的具有透明度效果。
我去自己设计一个吧。打开ps 。

文章插图
先打开我的logo，然后将其背景白色去掉。

文章插图
然后新建一个文件，宽度和高度从程序里查找，或者从墨刀里。

文章插图
宽：283px，高78px；
然后在新文件中编辑，设计号图标，这里就不再说如何设计了，想学习ps的可以去搜一下教程，比较简单。

文章插图
然后另存为png 。在DW中进行导入。现在网页的目录中添加一个图片的文件夹。

文章插图

文章插图
把图片复制进来。

文章插图
使用a超链接标签内部嵌套图片标签，然后在图片标签中引用图片。
<img src="https://www.08ts.cn/images/电气学院.png">
因为我设置的大小刚好，所以不用调节外观的高度，就可以了。看下效果。

文章插图
好了，就是图片内容稍微大了，显得有点太满了。还是设置下大小吧。

文章插图
缩小了之后，看着还行。

文章插图
然后是下侧的标题栏背景是渐变色，如何设置。我去搜一下。
嗯万能的网络。
使用background:linear-gradient(to top,rgba(255,255,255,0.15),blue); 就可以实现了。
背景色：线性渐变（到顶部，底部颜色，顶部颜色），因为为了实现透明的渐变，所以使用了rgba颜色，这样就可以实现透明效果了。