background

最新推荐文章于 2024-04-15 14:55:08 发布

无冇

最新推荐文章于 2024-04-15 14:55:08 发布

阅读量107

点赞数

本文链接：https://blog.csdn.net/weixin_43706559/article/details/94016677

版权

opacity：设置透明度范围（0—1），{filter（0—100） IE6以下}

background-image:url（图片路径）设置背景图片

•background-repeat
用于控制背景图片的重复方式。

•如果只设置背景图片默认背景图片将会使用平铺的方式，可以通过该属性进行修改。

•可选值：

–repeat：默认值，图片左右上下平铺

–no-repeat：只显示图片一次，不会平铺

–repeat-x：沿x轴水平平铺一张图片

–repeat-y：沿y轴水平平铺一张图片

•background-position
用来精确控制背景图片在元素中的位置。

•可以通过三种方式来确定图片在水平方向和垂直方向的起点。

–关键字：top right bottom left center

–百分比

–数值

•background-attachment
用来设置背景图片是否随页面滚动。

•可选值：

–scroll：随页面滚动

–fixed：不随页面滚动

•background
是背景的简写属性，通过这个属性可以一次性设置多个样式，而且样式的顺序没有要求。

•例如：

background: green url(1.jpg) no-repeatcenter center fixed05pt;"

.one{

background-color: #fff;

border-radius: 5px;

background-image: url('../../image/amazon-sprite_.png');

background-repeat: no-repeat;

width: 54px;

height: 36px;

display: inline-block;

}

.one{

background-position:0px -336px;

}

.one:active{

background-position: -54px -336px;

}

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<title>Document</title>

<link rel="stylesheet" type="text/css" href="../css/zuo1.css">

</head>

<body>

<a herf="#" class="one"></a>

</body>

</html>