background-image跑偏，跑位等问题

已于 2023-03-23 13:29:03 修改
阅读量389 收藏
点赞数
文章标签： css html5 Powered by 金山文档
于 2023-03-23 13:29:02 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/fhrlhh/article/details/129728864
版权
文章介绍了在CSS中如何使用background-image和background-size属性来避免背景图片在页面上出现跑偏或位置不准确的问题。示例代码展示了如何设置background-size以确保图片正确显示，如自动适应宽度的75%，以及全宽自动高度等方法。
摘要由CSDN通过智能技术生成

在使用background-image的时候，一定要配合background-size：（宽，高）一起使用，可以解决绝大多数跑偏跑位等问题

.con_back {
    display: block;
    font-size: 1.5rem;
    padding-left: 1.2rem;
    float: left;
    margin-top: 0.4rem;
    background: url(../images/con_left.png) no-repeat left center;
    background-size: auto 75%;
}
.q1_hhb .swiper1 {
    overflow: hidden;
    background: url(../images/swiper_bg.png) no-repeat center top;
    background-size: 100% auto;
    margin-top: -1px;
    padding-bottom: 3rem;
    box-sizing: border-box;
}

举几个例子~

liberalhumblehopeful
关注
关于 background-image 渐变gradient()那些事
专注于图像领域，主要研究内容包括计算机视觉和深度学习，特别是在图像分类、目标检测和图像生成等方面有深入的研究和实践经验。
11-15 2160
前言 在前面三篇文章中，剖析了CSS中的文本属性，俗话说一图胜千言，网页中一张好看的图片，配上精美的文字，定能吸引眼球。 background-image-设置元素的背景图片 定义 将图形（例如 PNG、SVG、JPG、GIF、WEBP）或渐变应用于元素的背景。 有两种不同类型的图像可以包含在 CSS 中：常规图像和渐变。 属性值 url(‘URL’) 图像的URL background-image: url(./bk.jpg); none 默认值，无图像 渐变 linear-gradient() 线性渐
uniapp微信小程序的background-image使用
前端程序员、项目经理、人工智能博主
12-03 5777
我们知道微信小程序的图片不能使用本地图片，而必须使用网络图片 <view class="top-wrapper" style="backgroundImage:url(http{{imgURL})}"> 在data绑定imgURL:require(‘static/image/order_detailbj.png’) 如上我使用的是通过view标签设置图片背景的 如果我们想通过image标签也可以 <image :src='http+imgURL'></image> 有
SwiftUI初级课程（十六）旋转、偏移、Text背景
qyw2013的专栏
01-01 598
SwiftUI初级课程（十六）旋转和偏移进行镜像操作。
background 和 img_浅谈利用background-position和calc()实现background-image偏移
weixin_39571404的博客
12-01 565
从一个简单的例子入手<css样式如下：.child{ width:500px; height:500px; background-color: rgb(201, 245, 145); //为了好区别，把background调灰 background-repeat: no-repeat; background-size: 20% 20%; background-imag...
【QT】pushbutton的background-image设置
最新发布
Xxx990615的博客
07-12 178
默认background-image显示的图片可能为平铺状态，改为border-image的样式会充满pushbutton至合适位置。
背景的偏移与定位和背景固定
peichaohang的博客
12-27 5306
background-position背景的偏移 背景图片默认是贴着元素的左上角显示 通过background-position可以调整背景图片在元素中的位置 可选值： 该属性可以使用 top right left bottom center中的两个值来指定一个背景图片的位置 top left 左上 bottom right 右下 如果只给出一个值，则第二个值默认是center 也可以直接指定...
CSS 背景background，精灵spirit(移动背景图位置来实现)
ycs_0405的专栏
09-06 933
参考：https://blog.csdn.net/houyanhua1/article/details/78387884 CSS背景background background-color: 背景色,英文单词或十六进制颜色都可以。 background-image:url(图片路径 )背景图 background-repeat:（no-repeat不重复，repeat-x,repeat-y）重复 background-position:(left,center top bottom right) 背景图定位
HTML中如何将背景图片移动,怎么设置html的背景图片的位置
热门推荐
weixin_34170139的博客
06-30 1万+
设置html的背景图片的位置的方法是，给背景图片添加background-position属性，并且修改合适的属性值就可以了，例如【background-position:center;】。本文操作环境：windows10系统、html 5、thinkpad t480电脑。如果我们想要在html代码中移动下背景图片的位置，其实可以借助于background-position属性。可能不少同学还不知...
background-image 背景平铺方式、 CSS3 background-size背景图像大小
m0_71814235的博客
07-27 6826
background-image 背景平铺方式、 CSS3 background-size背景图像大小
巧用CSS background-image属性制作图形背景
we
07-12 1568
先看一张广告图，这是我们平时在浏览网页的时候，经常见到的一种文字广告设计，在文字周围绕着白色线条，我想大多数设计师可能就直接在ps中画一个png图片，再用css background-image 背景属性插入图片链接来实现。但今天这篇文章，我要用background-image 来画这个白色线条框。 在了解了background这些属性后，我们就可以在html前端页面中用css来实现一些简单的背景图，例如：▲平铺的圆点背景 ▲平铺的斜线条背景 ▲平铺的马赛克背景 ▲指定4种颜色的背
background-image使用
web18224617243的博客
08-01 2567
url("")；
关于background-image调整大小和位置的方法笔记
xiaoshen66的博客
07-19 3691
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> #divtest{ width:400px;...
css 图片上使用position定位图片，缩小屏幕 图片会跑（已解决）
蓝胖子的博客
03-14 1357
css 图片上使用position定位图片，缩小屏幕 图片会跑（已解决）
background qt 设置平铺_Qt中关于background、background-image和border-image的学习和记录
weixin_39603469的博客
01-17 702
设置背景图已知有三种方法background:url();//平铺background-image:url();//平铺border-image：url();//拉伸填充其中第一种方法可以直接在尾部添加no-repeat阻止图片平铺；第二种则需要添加background-repeat语句：background:url() no-repeat;//阻止平铺backgroundimage:url();...
QT设置前景图位置
itjobtxq的专栏
05-28 1267
QPushButton { background-image: url(:/Resources/green_click.png); image: url(:/Resources/toolsbutton_install.png); border:none; image-position:left; padding-left:10px; } 效果如下：
background qt 设置平铺_QT背景图设置4种方法总结对比
weixin_33209661的博客
02-23 5491
自己开发了一个股票智能分析软件，功能很强大，需要的点击下面的链接获取：1.Qss 的setStyleSheet设置背景图片1.1background-image设置平铺或者居中这种方法设置的要点是要将图片添加到qrc文件中，形成资源路径，然后在QT界面编辑或者程序代码中通过设置路径来实现背景图片设置。图片大小不能自适应控件大小。只能可以实现平铺或者居中显示。background-position:...
Qt背景图片设置四种方法对比总结
baochunlei1的博客
09-21 1万+
自己开发了一个股票智能分析软件，功能很强大，需要的点击下面的链接获取： https://www.cnblogs.com/bclshuai/p/11380657.html 1.Qss 的setStyleSheet设置背景图片 1.1background-image设置平铺或者居中 　　这种方法设置的要点是要将图片添加到qrc文件中，形成资源路径，然后在QT界面编辑或者程序代码中通过设置路径来实现背景图片设置。图片大小不能自适应控件大小。只能可以实现平铺或者居中显示。background-posi.
angularjs cli执行ng build命令文件路径错误解决
“明明很开心”的博客空间
04-24 533
angularjs cli执行ng build命令打包文件时，加载的所有js路径错误， 执行使用命令 ng build --base-href ./ 即可解决问题
CSS3新特性解析：background-clip, background-origin与border-image实战
"深入理解CSS3中的background-clip, background-origin和border-image属性，以及它们在创建复杂背景和阴影效果中的应用。" 这篇博客主要探讨了CSS3中的三个新特性：background-clip、background-origin和border-...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值