巧用CSS background-image属性制作图形背景
时间:2022-10-04来源:杨青青博客作者:杨青青 阅读:
先看一张广告图,这是我们平时在浏览网页的时候,经常见到的一种文字广告设计,在文字周围绕着白色线条,我想大多数设计师可能就直接在ps中画一个png图片,再用css background-image 背景属性插入图片链接来实现。
但今天这篇文章,我要用background-image 来画这个白色线条框。
background-image: linear-gradient(#fff, #fff), linear-gradient(#fff, #fff), linear-gradient(#fff, #fff), linear-gradient(#fff, #fff), linear-gradient(#fff, #fff); background-size: 1px 130px, 66px 1px, 66px 1px, 1px 17px, 1px 20px; background-position: 3px 30px, 3px 30px, 3px 160px, 68px 30px, 68px 140px; background-repeat: no-repeat;
- background-image 创建linear-gradient线性渐变,因为颜色需要指定两种以上,这里是白色的,所以linear-gradient写入了两次#fff白颜色。
- background-size 指定背景图形的大小,可以用像素px,或者百分比为单位。
- background-position 指定背景图像的位置,四个方向 left、top、right、bottom,也可以用像素0px 0px和百分比x% y%,第一个值是水平位置,第二个值是垂直位置。
- background-repeat 属性设置是否及如何重复背景图像,repeat(默认属性值)repeat-x背景图像将在水平方向重复。repeat-y背景图像将在垂直方向重复。no-repeat顾名思义,就是不重复,背景图像将仅显示一次。
在了解了background这些属性后,我们就可以在html前端页面中用css来实现一些简单的背景图,例如:
▲平铺的圆点背景
上一篇:很抱歉没有了
下一篇:用Html标签和CSS3写的一个手机!
你觉得文章内容怎么样