11种常用css样式之background学习

2022-11-03,,,,

background如何简写?如何在背景图像不变的情况下,依旧实现页面文字滚动,为之奈何?别担心,快用background-attachment: fixed;/*固定定位*/常用的background样式如下,1.background-color2.background-image3.background-repeat4.background-attachment5.background-position,废话不多扯,直接代码页面展示:

 <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>11种常用css样式之背景样式学习</title>
<style type="text/css">
*{
margin: 0;
padding: 0;
font: 14px/1.5em "Microsoft YaHei";
color: #fff;
}
body{
background-image:url(images/xs.png);/*背景图像*/
background-repeat: no-repeat;/*不重复*/
background-color: #ccc;
background-position:left center;
/* background-position: 50% 50%; */
/*background-position: 10px 10px;*/
/* 以窗口左上角为坐标系(0,0)定xy轴,朝right正,朝bottom为正 */
/* background简写 */
background: #f33 url(images/xs.png) no-repeat right center;
background-attachment: fixed;/*固定定位*/
}
div.box{
background-color:#f90;/*背景颜色*/
}
</style>
</head>
<body>
<div class="box">
你的压力来源于:无法自律,只是假装很努力;现状跟不上内心的欲望;所以你焦虑又恐慌&nbsp;&nbsp;Your stress comes from: unable to discipline yourself, but pretending to work hard;
</div>
<!-- <p>你的压力来源于:无法自律,只是假装很努力;现状跟不上内心的欲望;所以你焦虑又恐慌&nbsp;&nbsp;Your stress comes from: unable to discipline yourself, but pretending to work hard;</p>*50 回车50 -->
</body>
</html>

11种常用css样式之background学习的相关教程结束。

《11种常用css样式之background学习.doc》

下载本文的Word格式文档,以方便收藏与打印。