• 技术文章 >web前端 >前端问答

    html背景图片怎么设置平铺方式

    青灯夜游青灯夜游2021-06-03 16:14:58原创87

    在html中,可利用background-repeat属性来设置背景图片的平铺方式;当属性值设置为“repeat”时可向垂直和水平方向平铺,“repeat-x”时可水平平铺,“repeat-y”时可垂直平铺,“no-repeat”时不平铺。

    本教程操作环境:windows7系统、CSS3&&HTML5版、Dell G3电脑。

    html背景图片设置平铺方式

    <!DOCTYPE html>
    <html>
    	<head>
    
    		<style type="text/css">
    			div{
    				border: 1px solid #000fff;
    				height: 200px;
    				background-image: url(img/1.jpg);
    				margin-bottom:10px ;
    			}
    			#content1 {
    				background-repeat: repeat;
    			}
    			#content2 {
    				background-repeat: repeat-x;
    			}
    			#content3 {
    				background-repeat: repeat-y;
    			}
    			#content4 {
    				background-repeat: no-repeat;
    			}
    		</style>
    	</head>
    	<body>
    		<div id="content1"></div>
    		<div id="content2"></div>
    		<div id="content3"></div>
    		<div id="content4"></div>
    	</body>
    
    	</html>

    效果图:

    1.png

    说明:

    background-repeat 属性设置是否及如何重复背景图像,定义了图像的平铺模式。

    默认地,背景图像在水平和垂直方向上重复。

    属性值:

    描述
    repeat默认。背景图像将在垂直方向和水平方向重复。
    repeat-x背景图像将在水平方向重复。
    repeat-y背景图像将在垂直方向重复。
    no-repeat背景图像将仅显示一次。

    (学习视频分享:css视频教程

    以上就是html背景图片怎么设置平铺方式的详细内容,更多请关注php中文网其它相关文章!

    声明:本文原创发布php中文网,转载请注明出处,感谢您的尊重!如有疑问,请联系admin@php.cn处理
    上一篇:html怎么设置header 下一篇:focus在HTML是什么意思
    第16期线上培训班

    相关文章推荐

    • html怎么定位• 如何解决html tomcat乱码问题• html怎么禁止另存• 邮件html是什么• html怎么设置图片按钮

    全部评论我要评论

  • 取消发布评论发送
  • 1/1

    PHP中文网