css

最新推荐文章于 2023-11-28 11:56:00 发布

余生再见

最新推荐文章于 2023-11-28 11:56:00 发布

阅读量100

点赞数

分类专栏： web

本文链接：https://blog.csdn.net/hewindows/article/details/102960422

版权

web 专栏收录该内容

22 篇文章 0 订阅

订阅专栏

背景属性
1、背景色
属性：background-color
取值：
任意合法颜色值
transparent
注意：
背景颜色会填充到元素的内容区域，内边距区域以及边框区域

p {background-color: gray;}

2、背景图像
属性：background-image
取值：url(图像url)

body {background-image: url(/i/eg_bg_04.gif);}

3、背景平铺
属性：background-repeat
取值：
1、repeat
默认值，垂直和水平方向都平铺
2、repeat-x
横向平铺
3、repeat-y
纵向平铺
4、no-repeat
不平铺，仅显示一次
4、背景图片尺寸
属性:background-size
取值:
1、value1 value2
具体数值，value1表示背景图像的宽度，value2表示背景图像的高度
2、value1% value2%
以元素的尺寸占比决定背景图的尺寸
3、cover
覆盖
把背景图扩展至足够的大(等比缩放)，直到背景图像完全覆盖到元素区域位置
4、contain
包含
将背景图像等比缩放，直到右边或下边碰到元素边缘为止
背景颜色设置实例：

<html>
<head>

<style type="text/css">

body {background-color: yellow}
h1 {background-color: #00ff00}
h2 {background-color: transparent}
p {background-color: rgb(250,0,255)}

p.no2 {background-color: gray; padding: 20px;}

</style>

</head>

<body>

<h1>这是标题 1</h1>
<h2>这是标题 2</h2>
<p>这是段落</p>
<p class="no2">这个段落设置了内边距。</p>

</body>
</html>

5、背景图片固定
属性：background-attachment
取值：
1、scroll
滚动,默认值
2、fixed
固定，将背景图保持在可视化区域内，不随着滚动条而发生变化

body{
	banckground-attachment:fixed;
}

6、背景图片位置
属性：background-position
取值：
1、x y
x ：背景图像水平偏移位置
取值为正，向右移动
取值为负，向左移动
y ：背景图像垂直偏移位置
取值为正，向下偏移
取值为负，向上偏移
2、x% y%
3、
x:left/center/right 替代
y:top/center/bottom 替代
CSS Sprites
将若干幅小图像拼合到一副大图像中，想看具体小图像的时候，配合着背景图已经背景图像位置的方式进行移动，显示

1、根据要看的图像，创建一个元素,该元素大小要与要看的图像大小一致。
2、通过背景图像以及背景图像位置移动背景图到显示的元素中
7、背景属性-简写属性
background:color url() repeat attachment position;

注意：属性值可以省略，省略的话将采用默认值

background:red;

body
{ 
background-image:url('bgimage.gif');
background-repeat:no-repeat;
background-attachment:fixed;
background-position:center;
}

余生再见

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
css

背景属性1、背景色属性：background-color取值：任意合法颜色值transparent注意：背景颜色会填充到元素的内容区域，内边距区域以及边框区域p {background-color: gray;}2、背景图像属性：background-image取值：url(图像url)body {background-image: url(/i/eg_bg_04.gif...
复制链接

扫一扫