• 中文
    • English
  • 注册
  • 赞助本站

    • 支付宝
    • 微信
    • QQ

    感谢一直支持本站的所有人!

    • 查看作者
    • 7:CSS设置元素背景

      一.  背景颜色

      background-color属性可以设置元素的背景颜色,需要指定一个颜色值(RGB,十六进制,颜色单词都可以)将指定的颜色值会作为元素的背景色。如果不设置背景颜色,元素默认背景颜色为透明。

      二.  背景图片

      background-image可以设置元素的背景图片,需要使用url地址作为参数,url地址可以指向图片的路径或链接。例如

      background-image: url(https://zhangjia.io/wp-content/themes/LightSNS_1.5_beta_200.3/images/avatar/6.png);

      三.  背景重复

      background-repeat属性可以控制背景图片的重复方式。可选值:

      • repeat:默认值,图片在水平垂直方向平铺

      • no-repeat:只显示一次,不会平铺

      • repeat-x:水平方向平铺

      • repeat-y:垂直方向平铺

      <!DOCTYPE html>
      <html>
      	<head>
      		<title> 标题 </title>
      		<meta charset='UTF-8'/>
      		<style type="text/css">
      			#zj1{	
      				width:1000px;
      				margin:5px auto;
      				height:150px;
      				background-image: url(https://zhangjia.io/wp-content/themes/LightSNS_1.5_beta_200.3/images/avatar/6.png);
      				background-repeat:repeat-x;			
      			}
      
      		</style>	
      	</head>
      	<body>
      
      			<div id="zj1"> 
      			
      			</div>
      
      	</body>
      </html>

      四.  背景位置

      background-position属性可以控制背景图片在元素中的位置,可以通过三种方式来确定图片在水平方向和垂直方向的起点:

      7:CSS设置元素背景

      • top、right、bottom、left、center,如果您仅规定了一个关键词,那么第二个值将是"center"。默认值:0% 0%。

        • background-position:top 【2】

        • background-position:right 【6】

        • background-position:bottom 【8】

        • background-position:left 【4】

        • background-position:center 【5】

        • background-position:left top 【1】

        • background-position:left bottom【7】

        • background-position:right top 【3】

        • background-position:right bottom【9】

      • 百分比,第一个值是水平位置,第二个值是垂直位置。左上角是 0% 0%。右下角是 100% 100%。如果您仅规定了一个值,另一个值将是 50%,利用百分比可以精确定位

        • 数值,第一个值是水平位置,第二个值是垂直位置。左上角是 0 0。单位是像素 (0px 0px) 或任何其他的 CSS 单位。如果您仅规定了一个值,另一个值将是50%。可以混合使用 % 和 position 值。

      <!DOCTYPE html>
      <html>
      	<head>
      		<title> 标题 </title>
      		<meta charset='UTF-8'/>
      		<style type="text/css">
      			#zj1{	
      				border:1px solid black;
      				width:80px;
      				height:80px;
      				background-image: url(img/2.png);
      				background-repeat:no-repeat;
      				background-position:right top;
      			}
      
      			
      
      		</style>	
      	</head>
      	<body>
      			<div id="zj1">
      
      			</div>
      	</body>
      </html>

      五.  背景滚动

      background-attachment属性可以设置背景图片是否随页面滚动。一般用于body标签,可选值:

      • scroll:随页面滚动

      • fixed:不随页面滚动

      山东省·济南市
    • 1
    • 0
    • 0
    • 513
    • 十二

      请登录之后再进行评论

      登录
    • 做任务
    • 实时动态
    • 偏好设置
    • 返回顶部
    • 单栏布局 侧栏位置: