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

    css怎么设置图片不平铺

    藏色散人藏色散人2021-04-02 14:39:46原创605

    css设置图片不平铺的方法:首先创建一个HTML示例文件;然后在style标签中添加“background:url(img/3.jpg)no-repeat;}”来设置图片不平铺即可。

    本文操作环境:Windows7系统、HTML5&&CSS3版,DELL G3电脑

    css的background-repeat 属性定义了图像的平铺模式。从原图像开始重复,原图像由 background-image 定义,并根据 background-position 的值放置。

    css可以使用background-repeat属性设置图片不平铺。

    属性值:

    repeat:沿水平竖直两个方向平铺,这也是默认值

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

    repeat-x:只沿水平方向平铺

    repeat-y:只沿竖直方向平铺

    背景图像的位置是根据 background-position 属性设置的。如果未规定 background-position 属性,图像会被放置在元素的左上角。

    示例:

    1、未设置平铺方式

    <body>
    <style>
    .box{ border:1px solid #093; width:800px; height:800px;
    background:url(img/3.jpg);}
    </style>
    <div class="box">
    hello word
    </div>
    </body>

    效果图:

    32d6f0a4a2991e83922304a31ef9787.png

    2、设置图片不平铺

    <body>
    <style>
    .box{ border:1px solid #093; width:800px; height:800px;
    background:url(img/3.jpg)no-repeat;}
    </style>
    <div class="box">
    hello word
    </div>
    </body>

    效果图:

    075f71e278250e4e3a27582f26deafb.png

    推荐学习:《css视频教程

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

    声明:本文原创发布php中文网,转载请注明出处,感谢您的尊重!如有疑问,请联系admin@php.cn处理
    专题推荐:css
    上一篇:css怎么去掉a的下划线 下一篇:什么是css样式表
    php中文网线上培训班

    相关文章推荐

    • css如何设置透明背景• css怎么增加背景图片• 如何通过css设置背景图片全屏• css怎么设置背景图片大小• html怎么设置背景图片

    全部评论我要评论

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

    PHP中文网