前端使用div写css样式,引入background背景图,(保证背景图等比例缩放, 背景图不变形)

最新推荐文章于 2024-05-13 10:29:58 发布
最新推荐文章于 2024-05-13 10:29:58 发布
阅读量1.6k 收藏
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/HuangZeJunXXX/article/details/100735006
版权

background-image: url 图片地址
background-repeat : no-repeat 背景平铺 不重复
background-position: center centre 背景图位置
background-size: 100%; 背景图大小

A-飞龙在天
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
css背景图等比例缩放，盒子随背景图等比例缩放
weixin_34280237的博客
04-20 3019
很多时候我们给网站了一个大banner,但是随着屏幕的变化，背景会变形，我们知道background-size可以实现背景图等比例缩放，但是，我们想让下面的盒子根据缩放后背景图的高度，也能自动向上挤。这用css竟然也是可以实现的，瞬间感觉自己的css弱爆了，下面是我写的小demo,我想在响应式的网站上，这个用途还是很广的 <!DOCTYPE html> <html lang="...
CSS3的background-size属性，实现响应式式图片等比例缩放。
01-23
CSS3的background-size属性，实现响应式式图片等比例缩放。告别了考虑各种兼容性物理像素的烦恼。
网站背景图等比缩放，不变形
qq_45832807的博客
09-21 924
background: url('../imgs/loginbg.jpg') no-repeat center center fixed; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; 1. background: url('../imgs/loginbg.jpg'); 2. back...
CSS实现图片自适应布局，且不拉伸变型
最新发布
weixin_41173973的博客
05-13 1458
expression是在IE5版本之后支持使用的，用来把CSS属性和Javascript脚本关联起来，是动态设置CSS属性的强大方法。但这样存在一个问题，如果按照宽度缩放，但图片过高会超出溢出盒子，这个时候需要对父级使用overflow:hidden隐藏超出图片内容。保证替换内容尺寸一定可以在容器里面放得下。scale-down: 就好像依次设置了none或contain, 最终呈现的是尺寸比较小的那个。效果：图片虽没有变形拉伸，但最终呈现的效果并不是我们想要的（同object-fit:none）
div背景图 等比缩放
weixin_33763244的博客
04-26 1146
2019独角兽企业重金招聘Python工程师标准>>> ...
背景图页面缩小会变形_CSS 实现背景图尺寸不随浏览器缩放而变化
weixin_39555715的博客
12-20 1940
一些网站的首页背景图尺寸不随浏览器缩放而变化，例如百度个人版的首页，缩放后背景图的尺寸并不改变：这样做的好处是，比如当你在1024*768px分辨率的屏幕上看到完整的背景，再换至1280*800px分辨率的显示器浏览，不会出现背景不能充满屏幕的情况。换句话说，就是在各个分辨率的显示器下都能看到充满屏幕的背景图。现在用CSS来实现这一效果。然后有两种方法可以达到背景图不缩放的效果：方法一. 把图片作...
CSS实现背景图尺寸不随浏览器缩放而变化的两种方法
09-25
使用`background`属性可以实现背景图固定且不随缩放变化，但可能因背景固定而产生滚动效果；使用`<img>`标签则更简单，但图片可能随滚动条移动。选择哪种方法取决于设计需求和用户体验的平衡。在实际应用中，可能还...
CSS实现网页背景图片自适应全屏的方法
12-09
为了适应不同设备的屏幕尺寸，并保证图片不因拉伸而失真，我们需要使用CSS来实现背景图片的自适应全屏显示。本文将详细解析如何通过CSS来达成这一目标。 首先，我们需要在HTML中创建一个div元素作为背景图片的容器...
CSS3背景图滑动视差效果幻灯片特效代码
03-20
**CSS3背景图滑动视差效果幻灯片特效代码详解** 在网页设计中，CSS3（层叠样式表第三版）提供了丰富的功能，让设计师能够实现更多动态和交互性的效果。其中，背景图滑动视差效果是一种极具视觉吸引力的设计手法，常...
HTML中使背景图片自适应浏览器大小实例详解
08-30
对于WordPress等CMS系统，可以通过创建自定义CSS样式或使用主题编辑器来应用这些方法，从而在特定页面设置自适应背景图片。 总之，要实现HTML中的背景图片自适应浏览器大小，可以利用CSS的`background-size`属性，...
CSS完美解决前端图片变形问题的方法
11-21
`object-fit`属性提供了多种填充方式，如`contain`（保持宽高比缩放，使图片完全包含在容器内），`fill`（不保持比例填充整个容器）等。需要注意的是，`object-fit`需要图片有明确的宽高设定才能生效，且在较旧版本...
Div里CSS控制图片按比例扩大缩小不变形
ljw_Josie的博客
07-24 1万+
一般来说，我们设定一定宽度高度的div标签，在里面放上图片，只有当图片大小尺寸符合这个宽度和高度的时候显示最佳。那有的时候不同的界面，同样的信息（比如头像）放大的尺寸是不一样，怎么才能让图片根据DIV的宽高度进行，缩放呢？其实很简单，只用设置其css样式即可。     .photo img                  {         max-width:80px;//这是DIV的大
CSS实现背景图片固定宽高比自适应调整
feiyu_may的博客
08-20 8万+
    &lt;img&gt;标签可以使图片在保持宽高比不变的情况下自动调整。我们讨论的是div的背景图片实现固定宽高比自适应调整的方法。这里的图片不是&lt; img&gt;标签一样通过src引入，而是通过css的background-image: url('路径')实现。     实现背景图片固定宽高比缩放我们采用padding-top:(percentage)来实现，padding-top取...
设置背景图片大小的方法
我的成长历程
08-07 1万+
等比例缩放填满盒子
记录利用CSS完美解决前端图片变形问题
weixin_30666943的博客
06-06 1552
在头条IT学堂看到CSS完美解决前端图片变形问题的文章，就记录分享下： 一、让图片的宽度或者高度等于容器的宽度或高度，多余的裁掉，然后让图片居中： <style type="text/css"> div{ width: 200px; height: 200px; overflow: hidden; border: 2px solid r...
前端背景图放置_前端开发关于网页背景图片的缩放自适应及组合形成背景图的问题...
weixin_33520805的博客
12-24 959
前端游戏开发贴吧游戏前端开发游戏开发流程 策划美术前端后端昨天在切图时遇到如下两个问题：1.需要背景图片无论浏览器大小如何缩放，背景图片始终宽度百分百显示。2.需要将给出的一张背景图片和一张靠repeat形成的图片结合形成背景图—针对第一个问题：CSS3 background-size图片自适应background-size属性和background-origin属性、background-cli...
css background-image 自适应宽高
热门推荐
chenqk_123的专栏
03-18 22万+
最近接手前端页面，让给调样式。哥纯粹一个代码程序猿，表示那些个样式应该让前端人员或者美工小妹妹来实现. 书归正传，碰到了问题，页面要在手机上展现，众所周知，手机在中国的牌子很多，很难做到统一。 页面上有五个导航栏，是按百分比设置的，让我搞个背景图，点击某一导航栏的时候，背景改变，BUT，给我的背景图是一张有着固定大小的图片，放上去之后，各种不适应，不和谐，后来就想到如果能让背景图自适应导航栏的
如何让css背景图片占满全部背景，并且保持长宽比
WKY_CSDN的博客
03-28 7万+
在实际的开发中，我们经常使用的背景图片比屏幕要小一点，这时候我们希望这个背景图片自动的铺满而不repeat，并且为了美观，我们希望保持其图片原有的长宽比。这时候，我们使用以下方法就可以了 .bk{ background-image: url(http://tupian.aladd.net/photo2/1611.jpg); background-repeat: no-repeat;
css如何实现背景图片等比例缩放
11-14
可以通过以下两种方式实现CSS背景图片等比例缩放： 1. 使用background-size属性，将其设置为contain或cover，可以保持图片的宽高比例不变，同时适应容器大小。例如： ```css div { background-image: url(...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值