【大图背景不重复，不拉伸的基本样式】

最新推荐文章于 2023-02-14 16:21:33 发布
最新推荐文章于 2023-02-14 16:21:33 发布
阅读量832 收藏
点赞数
分类专栏： HTML 文章标签： html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/someaure/article/details/85041134
版权

【大图背景不重复，不拉伸的基本样式】
background-image: url(…/images/pic_1.jpg);
background-repeat: no-repeat;
background-position: center top;
background-attachment: fixed;
background-size: cover;

someaure1
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
html img和背景图处理图片不拉伸_解决background图片拉伸问题
weixin_36444911的博客
12-23 2289
ImageView中XML属性src和background的区别：background会根据ImageView组件给定的长宽进行拉伸，而src就存放的是原图的大小，不会进行拉伸。src是图片内容(前景)，bg是背景，可以同时使用。此外：scaleType只对src起作用；bg可设置透明度，比如在ImageButton中就可以用Android:scaleType控制图片的缩放方式如上所述，backg...
背景图页面缩小会变形_css3 background 新添属性让你的背景图不再拉伸而是随窗口变化而变化...
weixin_39616416的博客
12-20 1992
传统的页面制作中,当你遇到css2 的时候,如何来显示一张背景图呢?拉伸 (无节操的拉伸,容器长宽完全超出背景图的长宽)重复展示(用无数张同样的图片来铺满容器的背景面积)x轴 /y轴 重复展示(纵向拉伸不重复 / 横向拉伸不重复 )background-repeat 这个货看下它的值:repeat默认。背景图像将在垂直方向和水平方向重复。repeat-x背景图像将在水平方向重复。repeat-y背...
背景图片不被拉伸的简单解决方案
witernie的专栏
04-11 2366
background会根据组件给定的长宽进行拉伸，而src就存放的是原图的大小，不会进行拉伸。src是图片内容（前景），bg是背景，可以同时使用。可以使用xml src指定图片，这样图片就不会根据view长宽进行拉伸了 代码如下：<?xml version="1.0" encoding="utf-8"?> <bitmap xmlns:android="http://schemas.android.c
设置背景图时防止图片拉伸的解决方法
weixin_34175509的博客
07-03 907
在设置背景图时，如果图片不够大会被拉伸，使图片失真，如果图片太大会对view控件的显示造成影响。如果只是在ImageView中设置图片的话，在程式中可以利用setScaleType进行动态设定，在xml中可以简单的用android:scaleType来设定。（android:scaleType="CENTER_INSIDE" 图片比View小，图片不会拉伸 android:scaleType="C...
css background一行代码实现背景图片自适应视口并且不拉伸
七十多岁的人了、
03-04 5070
css background 小技巧
div设置背景图片且x轴重复排列的css样式
09-25
如果背景图片的宽度大于`div`的宽度，它会在X轴上不重复，仅在Y轴上重复。 最后，如果希望背景图片同时在X轴和Y轴上重复，可以省略`background-repeat`属性，或者将其设置为`repeat`： ```css #box { width: 200...
九宫格背景图，实现复杂可拉伸背景图。
08-02
首先，我们将一个复杂的背景图像分割成一个3x3的网格，即九个相等的部分，通常中间的三个小格子包含主要的视觉元素，而边缘和角落的格子则包含可重复或可拉伸的部分。这样做的目的是将图像的不变部分和可伸缩部分...
HTML中使背景图片自适应浏览器大小实例详解
08-30
首先，我们要明白问题的核心是让背景图片根据浏览器窗口的大小自动调整，保持其比例，同时不会被裁剪或拉伸。一种常见解决方案是使用CSS3的`background-size`属性配合`background-position`和`background-repeat`...
body背景图片拉伸另类实现
09-25
在网页设计中，有时我们希望页面的背景图片能够随着浏览器窗口的大小变化而拉伸，以保持背景图像的完整性或连续性。然而，HTML `<body>` 元素默认的背景属性并不支持这样的拉伸效果。这时，我们可以采用一些非传统的...
div100%平铺 浏览器缩小或在手机上查看 div背景显示不全bug的解决.rar
06-06
然而，当浏览器窗口缩小或在移动设备上查看时，`div`的宽度和高度可能不足以显示完整的背景图片，尤其是当背景图片尺寸固定且较大时。这就会导致背景图片显示不全，出现视觉上的bug。 解决这个问题的一种方法是使用...
css背景图片全屏铺满自适应不拉伸
weixin_42576186的博客
02-14 1万+
可以使用 CSS 的 background-size 属性来实现全屏铺满背景图片，并且不拉伸。下面是一个例子： body { background-image: url(your-background-image.jpg); background-size: cover; background-repeat: no-repeat; background-attachment: fi...
三行代码实现在网页中添加背景且居中填充不拉伸
sayhitoloverOvO的博客
09-03 859
代码位置 添加背景需要写在专门的css文件中或者在网页文件的html标签中新建style标签里： <html><style>配置语句</style></html> 了解background属性： background属性是一个简写属性，专门设置背景的属性，可以设置背景色，也可以设置背景图片。 下面看看background可以设置的属性： background-color： 规定要使用的背景颜色。 background-position： 规定背景
如何在显示图片缩略图时不挤压拉伸图片
RainSorrow的博客
03-07 1万+
前言：我们在前端显示图片缩略图的时候，会遇到不清楚图片的尺寸，然后使用固定高宽比的img来显示图片，这样会导致高宽比不一致的图片会被挤压拉伸。本文站以前端小白的视角来探讨这种问题的解决方案。 方案一 max-width和max-height 使用max-width和max-height来做，这种情况下不能保证每一张图片预览都是相同宽高的，但是却不会挤压拉伸图片。 如下图，二、三张图片的宽...
html 如何完美的显示图片，不拉伸图片，完整显示等等。
PrimaryColor
11-22 1万+
效果图： 代码： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> i.
background-image(自适应宽高)
热门推荐
qq_38292703的博客
10-01 7万+
\                .zoomImage {                 background-image:url(images/yuantiao.jpg);                 background-repeat:no-repeat;                 background-size:100% 100%;                 -moz-b...
html img和背景图处理图片不拉伸_css如何设置图片不重复拉伸？
weixin_42576467的博客
12-23 1182
css如何设置图片不重复拉伸？下面本篇文章就来给大家介绍一下使用CSS设置图片不重复拉伸的方法。有一定的参考价值，有需要的朋友可以参考一下，希望对你有所帮助。在CSS中，可以使用background-repeat属性来设置背景图片不重复；使用background-size属性来设置背景图片的拉伸。background-repeat属性background-repeat 属性定义了图像的平铺模式，设...
图片填满外层div 自适应不拉伸变形
ymumi的博客
06-19 3万+
#max-width:100%   相对于img本身的尺寸而言，最大的宽度为自身宽度 #width:100% 相对于父级宽度的 1.等比例缩小垂直居中：按宽度等比列缩放   或者可以选择按高度等比缩放 .photo-box{ display: table-cell; text-align: center; vertical-align: middle; ov...
背景图片不被拉伸方案及设置图片透明效果
qq_19265699的博客
07-17 959
做出如图效果，图片作文字背景，一般都是用ｂaｃｋｇｒｏｕｎｄ和ｓｒｃ， ｂａｃｋｇｒｏｕｎｄ会随着容器控件大小可能被拉伸，而ｓｒｃ不会，但与文字进行如图布局比较困难，经多次偿试，终于找到如下布局方案，主要通过相对布局与线性布局及图片控件组合应用，代码很简单，就不多解释了 第一次出博，各路过大神请轻拍 xml version="1.0" encoding="utf-8"?> L
css背景图片全屏铺满不拉伸
最新发布
09-11
### 回答1： 要让 CSS 背景图片全屏铺满而不拉伸，可以使用 `background-size: cover` 属性。这个属性会自动调整背景图片的大小，使得图片完整地覆盖整个容器，同时不拉伸图片。例如： ``` body { background-image: url(your-image-url.jpg); background-size: cover; background-repeat: no-repeat; background-attachment: fixed; background-position: center; } ``` 这样，背景图片就可以全屏铺满且不拉伸了。 ### 回答2： 要实现CSS背景图片全屏铺满且不拉伸可以使用以下方法： 1. 使用background-size属性： 在CSS中，可以使用background-size属性来设置背景图片的大小。通常，我们可以将其设置为cover，以使背景图完全覆盖背景区域，同时保持图片的比例不变。这样，背景图片可以全屏铺满，但可能会被裁剪。 例如： ``` body { background-image: url("背景图地址"); background-size: cover; background-repeat: no-repeat; background-position: center; background-attachment: fixed; } ``` background-repeat属性设置为no-repeat可以禁止背景图重复出现，而background-position属性将其设置为居中显示。同时，使用background-attachment: fixed属性可以固定背景图，使其随页面滚动而滚动。 2. 使用background-position属性和vw、vh单位： 使用background-position属性结合vw和vh单位，可以根据视口的宽度和高度设置背景图的位置，实现全屏铺满效果。 例如： ``` body { background-image: url("背景图地址"); background-repeat: no-repeat; background-position: center; background-attachment: fixed; background-size: auto; } @media (max-aspect-ratio: 16/9) { body { background-size: 100vw auto; } } @media (min-aspect-ratio: 16/9) { body { background-size: auto 100vh; } } ``` 通过@media媒体查询，可以根据视口的长宽比例设置合适的背景图大小。在上述示例中，背景图会根据视口的宽高比例设置为100vw自动高度或者自动宽度100vh。 综上所述，以上两种方法可以实现CSS背景图片全屏铺满而不拉伸的效果。 ### 回答3： 要将CSS背景图片全屏铺满但不拉伸，可以使用CSS3的background-size属性和background-position属性。以下是一种实现方法： 首先，在CSS样式中设置背景图片的路径，例如： ```css body { background-image: url("path-to-image.jpg"); } ``` 然后，使用background-size属性设置背景图片的尺寸，将其调整为cover，即将图片缩放以填充整个容器，但保持其纵横比： ```css body { background-size: cover; } ``` 接下来，使用background-position属性设置背景图片的位置为中心，即将其放置在容器的中央： ```css body { background-position: center; } ``` 最后，将容器的高度和宽度设置为100％，以使背景图片铺满整个屏幕： ```css html, body { height: 100%; width: 100%; } ``` 以上方法可以确保背景图片在保持纵横比的同时填满整个屏幕，不会出现拉伸的情况。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值