当前位置：首页 > news >正文

CSS学习6

news 来源：原创 2024/9/21 12:36:33

CSS背景

一、背景颜色和图片
二、背景位置
三、背景附着
四、背景简写
五、背景透明
六、背景缩放
七、多背景
八、凹凸文字
九、导航栏例子

一、背景颜色和图片

background-color: pink; 背景颜色
backgroundoimage: url(##.jpg); 背景图片
background-repeat: 平铺 repeat-x横向平铺，repeat-y纵向平铺；

平铺不到的地方显示背景颜色。

<html><head><style>div {width: 400px;height: 500px;background-color: pink;background-image: url(1.jpg);background-repeat: no-repeat;}</style></head><body><div></div></body>
</html>

二、背景位置

background-position: 更改背景图片位置，可以写两种值：

position包括top，center，bottom，left，right；顺序无所谓；
length写x和y坐标，以页面左上角为0点，向右为x轴，向下为y轴；
实际应用的时候也可以两种混搭: 10px center;

<html><head><style>div {background-color: pink;background-imgage: url(1.jpg);background-repeat: no-repeat;background-position: left top; /*默认左上角*//*如果方位名词只写一个，另一个默认center*/background-position: 10px 30px;/*精确单位，第一个值是x坐标，第二个值是y坐标*/}</style></head><body><div></div></body>
</html>

三、背景附着

设置背景内容随对象内容滚动还是固定。

scroll; 背景内容随内容滚动
fixed; 背景内容固定

<html><head><style>body {background-color: pink;background-imgage: url(1.jpg);background-repeat: no-repeat;background-position: left top;background-attachment: scroll;	}</style></head><body><div></div></body>
</html>

四、背景简写

background: 背景颜色背景图片背景平铺背景滚动背景位置。

<html><head><style>body {/*background-color: pink;background-imgage: url(1.jpg);background-repeat: no-repeat;background-position: left top;background-attachment: scroll;	*/background: #000 url(#.png) no-repeat fixed center -25px;}</style></head><body><div></div></body>
</html>

五、背景透明

文字半透明：color: rgba(0,0,0,0.2);
背景半透明：background: rgba(0,0,0,0.3);

<html><head><style>body {background: #000 url(#.png) no-repeat fixed center -25px;}div {height: 400px;background: rgba(0,0,0,0.3);}</style></head><body><div></div></body>
</html>

六、背景缩放

background-size: 设置背景图片缩放

设置宽高精确单位，尽量只改一个值防止缩放失真
设置百分比
cover自动缩放占满，溢出的部分会被隐藏，使用最多
contain自动缩放，高宽有一个和背景一样大停止，保持图片完整性但是会有裸露部分

我们插入的图片img直接用width和height设置

<html><head><style>div {height: 400px;background: hotpink url(#.jpg) no-repeat;background-size: 100px;background-size: 50%; /*缩放为原来的一半*/background-size: cover;background-size: contain;}</style></head><body><div></div></body>
</html>

七、多背景

background: # # # #, # # #;用逗号分割设置多个背景图

一个元素设置多重背景图片
每组属性用逗号分隔
如果存在重叠，前面的背景图会覆盖在后面的背景图上
背景颜色通常定义在最后一组上

<html><head><style>div {height: 400px;background: url(#.jpg) no-repeat left top , url(##.jpg) no-repeat left hotpink;}</style></head><body><div></div></body>
</html>

八、凹凸文字

<html><head><style>body {background-color: #ccc;}div {color: #ccc;font: 700 60px "微软雅黑";}div:first-child {text-shadow: 1px 1px 1px #000, -1px -1px 1px #fff;}div:last-child {text-shadow: -1px -1px 1px #000, 1px 1px 1px #fff;}</style></head><body><div>凸起的文字</div><div>凹下的文字</div></body>
</html>

九、导航栏例子

文本装饰：text-decoration

none 无
underline 下划线，链接默认
overline 上划线
line-through 删除线

<html><head><style>a {width: 100px;height: 50px;background-color: orange;display: inline-block;text-align: center;line-height: 50px; /*行高等于盒子高度，文字居中*/color: #fff;font-size: 20px;text-decoration: none;}a:hover { /*鼠标经过*/background: url(#.png) no-repeat;}</style></head><body><a href="#">qwe</a><a href="#">asd</a></body>
</html>