巧用CSS background-image属性制作图形背景

先看一张广告图,这是我们平时在浏览网页的时候,经常见到的一种文字广告设计,在文字周围绕着白色线条,我想大多数设计师可能就直接在ps中画一个png图片,再用css background-image 背景属性插入图片链接来实现。

巧用CSS background-image属性制作图形背景_第1张图片

但今天这篇文章,我要用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来实现一些简单的背景图,例如:

你可能感兴趣的:(前端,CSS,css,前端)