CSS设置图片的重复

CSS通过设置background-repeat属性来设置图片的重复方式,包括水平重复、竖直重复和不重复等。

图片的竖直方向重复。

<span style="font-size:24px;"><html><head><title>背景重复</title><style><!--body{padding:0px;margin:0px;background-image:url(
http://scs.ganjistatic1.com/gjfs12/M09/A3/B3/CgEHC1VGJz2HZm6eAAEe8iEJ1Go460_600-0_6-0.jpg);background-repeat:repeat-y;background-color:#0066FF;}      --></style></head><body></body>
</html></span>

如果将background-repeat属性的值设置为repeat-x,则背景图片将在水平方向上重复显示。

最后,就是将background-repeat的属性设置为no-repeat,即不重复作为单一的图片显示。

<span style="font-size:24px;"><html><head><title>背景重复</title><style><!--body{padding:0px;margin:0px;background-image:url(
http://scs.ganjistatic1.com/gjfs12/M09/A3/B3/CgEHC1VGJz2HZm6eAAEe8iEJ1Go460_600-0_6-0.jpg);background-repeat:no-repeat;}        --></style></head><body><div style="padding-left:10px;padding-to:100px;">小猫</div></body>
</html></span>

显示的效果,图片仅仅显示了一次,并通过div标记的CSS属性,调整了文字的位置,使其位于图片的上面。

CSS设置图片的重复相关推荐

  1. html照片与照片之间的间隔,css设置图片之间的间隔的方法

    css设置图片之间的间隔的方法 发布时间:2021-01-05 09:32:24 来源:亿速云 阅读:116 作者:小新 这篇文章将为大家详细讲解有关css设置图片之间的间隔的方法,小编觉得挺实用的, ...

  2. CSS设置图片的对齐

    CSS设置图片的对齐 横向对齐方式 图片的水平对齐方式和文字的水平对齐方式基本相同,分别是左.中.右三种方式,不同的是,图片的水平对齐通常不能直接通过设置图片的text-align属性设置,而是,通过 ...

  3. html如何让图片跟字体重叠,CSS设置图片与文字的间距

    [实例介绍] CSS设置图片与文字的间距 希望图片本身与文字有一定的距离只需要给标记添加margin属性即可.margin属性包括margin.top.margin-right,margin-bott ...

  4. html 设置图片左对齐,CSS设置图片的对齐

    CSS设置图片的对齐 横向对齐方式 图片的水平对齐方式和文字的水平对齐方式基本相同,分别是左.中.右三种方式,不同的是,图片的水平对齐通常不能直接通过设置图片的text-align属性设置,而是,通过 ...

  5. CSS设置图片的位置

    CSS设置图片的位置 CSS通过background-position属性来调整背景图片的位置. 比如,当希望背景图片显示在页面的右下角时,可以设置属性值为bottomright即可. <spa ...

  6. html语言图片无法居中,css设置图片无法居中是什么原因?

    在进行网页布局的时候,有时候图片的位置可能会影响整个页面的美观程度,我们经常会设置图片居中显示,但有时我们会遇到css设置图片无法居中. 下面我们来看一下css设置图片无法居中是什么原因. css设置 ...

  7. CSS设置图片与文字水平居中对齐

    很简单,设置图片的一个css样式即可,代码如下: <div><img src="url" style="vertical-align:middle;&q ...

  8. css 设置图片为灰色

    css设置整张图片颜色为灰色 css代码: .img_gray { -webkit-filter: grayscale(100%); -moz-filter: grayscale(100%); -ms ...

  9. css设置图片不显示的原因总结

    首先确认代码已经保存,然后再查看原因. 1.css没有被调用 F12检查css调用是否成功,如果没成功一般是css的名称写错了.(注意css的层级关系) 如我这里在写样式的时候在.picker-btn ...

最新文章

  1. 是否可以在另一个CSS文件中包含一个?
  2. Bootstrap的坑--千万别踩
  3. 视觉设计师跟平面设计_使设计具有视觉吸引力
  4. python实现共空间模式CSP
  5. 两台电脑共享怎么设置_两台电脑共用键鼠的简单设置
  6. cxgrid限定行数
  7. 正态分布的前世今生:正态分布的进一步发展
  8. IBM DB2关键特性解析:DB2分区特性
  9. 《一天搞懂深度学习》下载
  10. sql字符串拼接,转义
  11. Ubuntu下 VS code安装并配置C/C++模块
  12. 擦窗机器人毕业设计_家用擦玻璃清洁机器人结构设计毕业设计说明方案.doc
  13. java定义一个盒子类box_C++定义一个Box(盒子)类 看完你就知道了
  14. 蓝牙a2dp协议源码分析
  15. android 高德地图移动卡顿_Xamarin.Forms Android使用高德地图SDK
  16. Python-random.seed()的作用
  17. 怎么样去申请免费的云主机
  18. 数仓经典案例-各个视频平均完播率、平均播放进度
  19. 技术分享:OpenStack Magnum社区及项目介绍
  20. CF731D.80-th Level Archeology(暴力)

热门文章

  1. jQuery on()方法绑定动态元素的点击事件无效
  2. httphandlers 与 httpmodules
  3. TCP网络编程中connect()、listen()和accept()三者之间的关系
  4. IAR 单步调试很慢
  5. html新人入门代码,HTML入门(示例代码)
  6. java.lang.ClassNotFoundException: org/apache/xerces/parsers/SAXParser
  7. Errors occurred during the build. Errors running builder 'DeploymentBuilder' on project 'drp2.8'. ja
  8. C++ Primer 5th笔记(chap 17 标准库特殊设施)多字节低层IO操作
  9. 趣链 BitXHub跨链平台 (1)技术架构
  10. 《研磨设计模式》chap11 代理proxy模式