CSS中background:url() no-repeat right center的意思

已于 2022-03-03 13:09:40 修改
阅读量5.6k 收藏 10
点赞数 1
文章标签： css
于 2022-03-03 13:07:13 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_46355717/article/details/123250878
版权

最近在学习中遇到这个问题
background:url() no-repeat right center 是简写，原本写法如下

backgroud-image:url(图片);
background-repeat:no-repeat;
background-position:right center

图片位置

  • right center是图片的初始位置
  • right是水平位置，center是垂直居中
  • 这两个的顺序是先定义水平位置，再定义垂直位置；
例子
background:url(图片) no-repeat right 15px

背景图片

  • 背景图片不重复
  • 在水平方向靠近容器的右侧
  • 在垂直方向距离容器上方15px
xqq&xxr
关注
  • 1
    点赞
  • 踩
  • 10
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
纯css实现元素下出现横线动画（background-image）
12-13
效果图： html：   <div class='site_bar'>首页</div> css: .site_bar{ 　　background-image : linear-gradient(red,red); 　　background-position : center bottom; 　　background-size : 0 2px; 　　background-repeat : no-repeat; //这个属性不能少。 　　transition : .3s; } .site_bar:hover{ 　　background-size : 100% 2px; } 总结 以上所述是小
css-snippets:可重用的 CSS 片段
06-01
css 片段 可重用的 CSS 片段 视口元 你需要让所有 yo 页面都具有响应性 < meta name =" viewport " content =" width=device-width, initial-scale=1 " > 响应式背景图片 . responsive-background { background : url (/path/to/your/image.png) no-repeat center center fixed; -webkit-background-size : cover; -moz-background-size : cover; -o-background-size : cover; background-size : cover; } 并排列 . column-container { positio
CSS background 详解
最新发布
xjiasean的博客
03-23 238
(1) url() 图片的路径(2)no-repeat 背景图片不重复排满整个背景；repeat-x 表示X轴方向重复铺满；repeat-y 表示Y轴方向重复铺满；(3)第一个1px 表示距离左边1px；第二个1px 表示距离顶部1px（其中位置部分也可以写成：center、top、bottom、right、left）(4)fixed 设置背景图片是否随内容滚动，默认fixed=固定；scroll=滚动。
HTML：CSS中background:url()或background-image:url()不显示图片的可能解决办法
blog
08-07 1万+
要确保能用浏览器打开图片，然后复制地址栏里的路径，粘贴到url()的括号里面。在资源管理器里复制的路径和浏览器地址栏里的路径可能会不一样，比如斜杠“/”和反斜杠“\”的区别。 ...
background：url（）不显示 总结
weixin_30781433的博客
06-01 1864
对于background：url(imagePath);图片的不显示问题，有以下两种情况: 一.imagePath出错： 当你所写的css文档与HTML文档不在同一级的情况下，比如 css文档存储在style文件夹中，css中的background：url（imagePath）imagePath需要这么写：(../images/image.jpg...
background url怎么填充_CSS background 属性
weixin_33216057的博客
02-15 2983
标签：一、background属性可以设置一个元素的背景样式，当然前提是这个元素有具体的宽高值。先来一个简单的背景设置：1 #show-box{2 width:800px;3 height:500px;4 background:#000;5 background-image:url(image url);6 }7 这里只是简单的设置了颜色和背景贴图。下面让我们来看一下官方的back...
CSS【background+url路径写法（同一路径或不同路径）】
随便写写
07-07 1万+
CSS 背景属性用于定义HTML元素的背景。CSS 属性定义背景效果:background-color 属性定义了元素的背景颜色.页面的背景颜色使用在body的选择器中: background-image 属性描述了元素的背景图像.默认情况下，背景图像进行平铺重复显示，以覆盖整个元素实体.尽量把图片放置在与.html文件同一目录下【我自己在写background-image的时候，把网页文件和图片放到两个不同文件夹中，需要加../同一级/图片】默认情况下 background-image
关于CSS中background:url()插入背景图片，图片路径的问题
controlmaa的博客
11-19 2万+
写了一个css的练习，需要在一个盒子中插入图片作为背景，css代码如下（插入背景图片的代码在第五行）： .search-btn::before { content: ""; display: block; width: 20px; height: 18px; background: url(image/search-btn.png) no-repeat; } 我的项目结构如下（上文的代码在index.css中，我想要插入的图片是image目录下的search-btn
css中background属性引入图片url()中地址
weixin_57844432的博客
08-10 5439
css中background属性引入图片url()中地址
background:url(image/road.jpg) no-repeat center的基本用法介绍
热门推荐
MiyaWang21的博客
11-24 6万+
进行网页界面排版时，大家会经常用到background属性，写一些背景图片，颜色之类的，今天我先简单的介绍一下background属性的背景图片是什么样的效果。
MySQL基础--范式（前三范式）
weixin_44976835的博客
12-07 223
各种范式呈递次规范 分类： 1.第一范式：每一列都是不可分割的原子数据项 2.第二范式：在1NF基础上，非码属性必须完全依赖于候选码（在1NF基础上消除非主属性对主码的部分函数依赖) 实现：进行表的拆分，设立外键 3.第三范式：在2NF基础上，任何非主属性不依赖于其他非主属性（在2NF上消除传递依赖）实现：进行表的拆分，设立外键 1NF存在的问题： 1.数据冗余严重 2.数据添加时候存在问题，容易引起数据不合法 3.删除数据时存在问题，会要删除的数据的连带数据一起删除 1.函数依赖：如果通过A属性（属性
icon-css-generator:扫描图片目录生成图标css
05-14
icon-css-generator 扫描图片目录生成图标css... background: url(icons/add.png) no-repeat center center; } .icon-del { background: url(icons/del.png) no-repeat center center; } .icon-a-add { background: u
CSS小技巧:为不同类型的文件设置不同的链接样式
01-19
background: url(external.gif) no-repeat center right; } <p>/* emails */ a[href^=”mailto:”] { padding-right: 20px; background: url(email.png) no-repeat center right; } <p>/* pdfs */ a[href$=”.pdf...
strip-css-singleline-comments:在 CSS 中添加对单行注释的支持
06-04
概述 通过剥离它们来添加对 CSS 中的单行注释的支持。 /* * * OOCSS-style Media block */ .media { // TODO } .media > .mediaImg { ... background : url ( ' //example.com/brand-bg.png ' ) no-repeat center
css3-Radar:CSS3 雷达效果实验
05-17
css3-Radar（css3 雷达效果） 效果展示 介绍 简单的雷达图扫描图形，模拟了目标点，目标掉点的运行轨迹在y=x的直线上随机运动； 主要技术总结 Gradients(渐变) background 下可以使用多个渐变，使用,隔开 Linear-...
css 有弹动效果的网页导航
12-11
这是一个导航 #nav{ list-style:none; margin:0; padding:5px 0 0 0; background:#F0F0F0;...background:url(//www.jb51.net/upload/20091011190507833.gif) no-repeat 0 -4px #F3602A; font:12px/2
css样式中背景图片备用色的正确写法
12-13
在我们写css样式背景图的时候 ...复制代码代码如下: background: url(“images/6.png”) no-repeat scroll 0 center rgba(0, 0, 0, 0); rgba在ie8以及低于ie8的版本都无法解析，故连图片的不显示
Css样式–背景样式详解
12-13
复制代码代码如下: p.flower {background-image: url(/i/eg_bg_03.gif); padding: 20px;background-repeat: repeat-y;<code>background-position:center;</code>} 背景重复：repeat-x 和 repeat-y 分别导致图像只在...
js+css3实现旋转效果
11-26
我的前面一张文章实现了用css3制作旋转的效果,现在呢,我换另外一种方法来实现.就是使用js结合css3的方法...background:url(images/1.jpg) no-repeat center center; background-size:cover; margin:50px auto; } 上面的
background-repeat: no-repeat; background-position: center center;
06-09
这两行 CSS 代码的作用是设置元素的背景图片不重复，并将背景图片在元素中居中显示。其中 `background-repeat: no-repeat;` 表示背景图片不重复，而 `background-position: center center;` 表示背景图片在元素中水平和垂直方向上都居中显示。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值