图解background-attachment、clip、repeat、size

已于 2022-04-21 23:57:21 修改
阅读量1.5w 收藏 87
点赞数 65
文章标签： css html html5
于 2021-09-08 19:22:27 首次发布
原创文章，禁止任何形式转载！
本文链接：https://blog.csdn.net/shangyanaf/article/details/120186973
版权
学透CSS 专栏收录该内容
56 篇文章 13 订阅 ¥99.90 ¥299.90
订阅专栏
本文详细介绍了CSS中背景属性的使用，包括background-repeat的单值和两值语法，background-attachment的scroll, fixed, local属性值，background-position的定位方式，以及background-size的多种设置方式。通过实例展示了这些属性如何改变背景图片的平铺、滚动、位置和大小，帮助读者更好地理解和应用CSS背景样式。" 85900918,8257315,Hadoop HA问题解决：DFSZKFailoverController启动失败,"['大数据', '开发工具', '运维']
摘要由CSDN通过智能技术生成

大家好，我是半夏👴，一个刚刚开始写文的沙雕程序员.如果喜欢我的文章，可以关注➕ 点赞 👍 加我微信：frontendpicker，一起学习交流前端，成为更优秀的工程师～关注公众号：搞前端的半夏,了解更多前端知识! 点我探索新世界！

原文链接 ==>http://sylblog.xin/archives/38

前言

在关于 background-image 渐变gradient()那些事！我们介绍了，背景图片以及渐变，但是仅仅学会那点，只是背景图片的九牛一毛，本文要介绍的backdround-* 大家族，也是背景图片千变万化的基石。

了解本专栏 订阅专栏 解锁全文
YOLO大师
关注
专栏目录
订阅专栏
背景图片靠右对齐，相对右边框设置间距
卡卡西：一个擅长拷贝的前端程序员
09-04 2840
有个小箭头靠右边垂直居中对齐， background: url(..//image/right.png) no-repeat right center; 不过大部分情况下，箭头距离右边框是有一定间距的，可通过如下设置 background: url(../image/right.png) no-repeat right 20px center; 则距离右边框有 20px的间距（如果不设...
CSS背景、文字、字符间距
Carina_nana的博客
08-27 560
背景： background-repeat： 值 描述 repeat 默认。背景图像将在垂直方向和水平方向重复。 repeat-x 背景图像将在水平方向重复。 repeat-y 背景图像将在垂直方向重复。 no-repeat 背景图像将仅显示一次。 inherit 规定应该从父元素继承 background-repeat 属性的设置。 背景不变可以滚动： ...
CSS background-repeat属性
小阳的博客
11-30 7042
城市现在为了评选文明城市，都开始注重城市的市容市貌多种树、多修路，尤其是人行甬道都开始铺设清洁的瓷砖、大理石等一些装饰性设施。我们今天的话题就从甬道上的这些东西开始。Repeat英文意思是“重复”，拿到CSS中就有“平铺”的意思。顾名思义，background-repeat就是“背景平铺”的意思。它是控制背景图片的平铺方式。平铺的概念在现实生活中比比皆是，比如地板砖的平铺、农村二层小洋房墙壁的瓷砖平
css背景图片的的设置已经文字的间距
MYF110的博客
04-28 2146
下面是等价的位置关键字：单一关键字 等价的关键字 center center center top top center 或 center top bottom bottom center 或 center bottom right right center 或 center right left left center 或 center left 百分数值百分数值的表现方式更为复杂。假设你希...
css --- background 三（background-repeat、background-position）
fupo
04-05 975
碎碎念：知识点梳理归纳，如果有什么不对的感谢大家指正一起学习！ 1. background-repeat1.1 repeat （默认值）1.2 repeat-x1.3 repeat-y1.4 no-repeat1.4 inherit1.5 space1.6 round1.7 space 与 round 对比图2. background-position2.12.2属性值混合使用 1. background-repeat 设置背景图片重复 可设置水平轴、垂直轴、两个轴或者不重复 语法 backgro.
图解ARM-Linux的启动全过程
05-04
图解ARM-Linux的启动全过程：从内核的自解压到引导阶段，再到内核初始化，自后是文件系统的初始化。
图解U-Boot：第二阶段源码分析
03-04
图解U-Boot：第二阶段源码分析（清晰）
图解---图和动态规划算法
热门推荐
zhaojianting的博客
08-09 3万+
  动态规划是一种算法设计思想或者说是一种编程思维，并非想快速排序、二分查找、选择排序这种具体的算法。一般应用于图论中，用来寻找“最短路径”。图模拟的是实体间的关系或连接，如网页链接、人们的社交关系，如下的图表示张三的人际交际图：   图由节点和边组成，一个节点可能与多个节点直接相连，这些节点称为邻居节点，张三李四的前驱节点，李四是张三的后继节点。在上面的人际关系图中李四、王五是张三的邻居(朋友...
图解GPT-2（完整版）！
Datawhale
11-08 6750
↑↑↑关注后"星标"Datawhale每日干货&每月组队学习，不错过Datawhale干货译者：张贤， 哈尔滨工程大学，Datawhale原创作者干货长文...
html中repeat的作用,CSS的background-repeat属性_html/css_WEB-ITnose
weixin_32154109的博客
06-15 914
background-repeat属性的定义和用法:设置或检索对象的背景图像如何铺排填充。必须先指定background-image属性。允许提供2个参数，如果提供全部2个参数，第1个用于横向，第二个用于纵向。如果只提供1个参数，则用于横向和纵向。特殊值repeat-x和repeat-y除外，因为repeat-x相当于repeat no-repeat，repeat-y相当于no-repeat re...
使用css制作出一个可以随意调节间距的边框
zhkkky的博客
03-13 305
众所周知，ui设计一般是不懂css的，也就是说他们设计出来的页面可能会有些细节是原生的css语言无法做到的，就比如原生的css边框虚线之间的间距比较小，无法控制，这个时候就需要我们换个思路来操作了。用来控制画出来的边框的方向是水平还是垂直。这里我们使用线性背景来制作该效果；用来控制画出来的边框的宽度和间距。用来控制画出来的边框的颜色。
Single molecule real-time (SMRT) sequencing comes of age: applications and utilities for medical dia
wangprince2017
10-04 1424
Single molecule real-time (SMRT) sequencing comes of age: applications and utilities for medical diagnostics Simon Ardui,Adam Ameur,Joris R Vermeesch,Matthew S Hestand Author Notes Nucleic Acids Research, Volume 46, Issue 5, 16 March 2018, Pages 21...
【css】背景图片-css3新增关于背景图片重复显示属性
夜雨Gecer的博客
09-07 1995
本文主要描述css3关于背景图片重复显示新增的属性； 什么也不设置时 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> div{ ...
CSS中背景图片的属性：background-repeat、background-position、background-size
xuehyunyu的博客
05-26 2万+
背景图片的各种属性： 1、background-repeat：设置图片平铺方式。有三个属性：no-repeat（图片保留自身大小不平铺）、repeat-x（图片在水平方向上平铺）、repeat-y（图片在垂直方向上平铺） 2、background-position：确定图片显示的位置。 background-position: 30px 50px;   图片在水平方向上向右偏移30px，在垂
css中repeat用法,background-repeat 怎么使用
weixin_33855603的博客
08-04 2408
我们知道background属性是用于设置背景的，那么background-repeat属性怎么使用呢？本篇文章就来给大家介绍一下background-repeat属性的使用方法。background-repeat属性设置是否及如何重复背景图像，也就是定义了图像的平铺模式。默认地，背景图像在水平和垂直方向上重复。background-repeat属性的设置从原图像开始重复，原图像由backgrou...
前端设计师必知的background属性（有CSS3内容）
xigl0727的专栏
09-29 749
注：本文转自：http://www.cnblogs.com/biko-zc/archive/2009/09/09/1563545.html背景属性——background是css中的核心属性。你应该对它有充分的了解。这篇文章详细讨论了background的所有相关属性，甚至包括background-attachment，还为我们介绍了它在即将到来的CSS3中的样子，还有那些新加入的背景属性。 
css中background:url背景图片如何铺满并正常显示
m0_37866091的博客
12-22 9395
.box{ height: 300px; width: 300px; background:url('../imgs/108.png') no-repeat center 0px; background-position: center 0px; background-size: cover; text-indent: -999px; } 说明： url(‘图片路径’)——图片路径的位置； no-repeat—— 图片不重复； repeat-x是横向铺满，就
《图解网络 - 小林 coding》下载
最新发布
11-30
《图解网络 - 小林 coding》是一本由小林 coding 编写的图解网络相关内容的书籍。如果您希望下载这本书，您可以通过以下途径进行下载： 首先，您可以前往亚马逊、京东、当当等在线图书商城进行购买下载。在这些电子商城中，您可以搜索《图解网络 - 小林 coding》，找到该书并进行购买下载。 其次，您还可以前往一些知名的图书类网站进行下载，比如豆瓣读书、喜马拉雅等平台。在这些网站中，您可以直接搜索《图解网络 - 小林 coding》，找到相关链接进行购买下载。 此外，您还可以通过一些手机应用进行下载，比如微信读书、QQ阅读等。这些应用中提供了大量的图书资源，您可以在搜索框中输入《图解网络 - 小林 coding》，然后根据提示进行购买下载。 总的来说，您可以通过在线图书商城、知名图书类网站、手机应用等多种渠道进行《图解网络 - 小林 coding》的下载。希望这些信息对您有所帮助，祝您阅读愉快！
评论 55
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

YOLO大师

你的打赏，我的动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值