博客列表 >CSS-背景

CSS-背景

的确
的确原创
2020年03月15日 16:21:43703浏览
CSS背景属性用于定义HTML元素的背景

背景颜色Background-color属性定义了元素的背景颜色

页面的背景颜色使用在body选择器中

实例:

<style type=”text-css”>Body{Background-color:red;}</style>背景图像Background-image属性描述了元素的背景图像

默认情况下,背景图像进行平铺重复显示,以覆盖整个元素实体

实例:

<style type=”text-css”>Body{Background-image:url(images.123.jpg);Background-color:red;}背景图像-水平或垂直平铺默认情况下background-image属性会在页面的水平或者垂直方向平铺

如果要图片平铺可以使用background-repeat属性

一些图片如果在水平方向与垂直方向平铺,这样看起来很不协调

水平平铺(repeat-x),垂直平铺(repeat-y),不平铺(no- repeat)

实例:

<style type=”text-css”> Body{Background-image:url(images/123.jpg); Background-repeat:repeat-x; } </style>这个实例是背景图像与文本显示在同一位置,为了让页面排版更加合理,不影响美观,我们可以改变图片位置,可以使用background-position属性来改变图像在背景中的位置

实例:

Body { Background-image:url(images/123.jpg); Background-repaet:no-repeat; Background-position:right top;Margin-right:200px; } </style>Background-简写在以上实例中我们可以看到页面的背景颜色通过了很多属性控制,为了简化这些属性代码,我们可以将这些属性合并到同一个属性中,背景颜色的简写属性为“background”

当使用简写属性时,属性值得顺序为

1.      Background-color

2.      Background-image

3.      Background-repeat

4.      Background-attachment

5.      Background-position

以上属性无需全部使用,可以按照页面的实际需要使用

声明:本文内容转载自脚本之家,由网友自发贡献,版权归原作者所有,如您发现涉嫌抄袭侵权,请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言,请遵守新闻评论服务协议