• 中文
    • English
  • 注册
  • 查看作者
  • 7:CSS设置元素背景

    一.  背景颜色

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

    二.  背景图片

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

    background-image: url(https://zhangjia.pro/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.pro/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:不随页面滚动

    山东省·济南市
  • 0
  • 0
  • 0
  • 1.7k
  • 十二

    请登录之后再进行评论

    登录
    单栏布局 侧栏位置: