css——给多张图片设置一个背景图：上下固定尺寸+中间拉伸，里面放内容

最新推荐文章于 2023-06-20 16:53:06 发布

毛发苍苍

最新推荐文章于 2023-06-20 16:53:06 发布

阅读量2.2k

点赞数

分类专栏：布局/ui/CSS H5移动端

本文链接：https://blog.csdn.net/weixin_45629623/article/details/116176039

版权

H5移动端同时被 2 个专栏收录

38 篇文章 3 订阅

订阅专栏

布局/ui/CSS

23 篇文章 1 订阅

订阅专栏

UI图：头尾是特殊的边框。中间也有边框无限拉升，里面要放图片

html部分分为三层

最外层       防止背景图的上下部分，分别置顶置底
——中层		放置背景图中部
————内层*n   	放置内容撑开最外层

最外层和中层都是设置
在这里插入图片描述

在这里插入图片描述
这时候你把.in背景图宽度调回300，把图片透明图改回1，再微调大小不要遮住边框就实现了。
ps: UI 切图中间这图要圆角的，其次可以把紫色改为透明色也可以

优惠劵

毛发苍苍

关注关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
css——给多张图片设置一个背景图：上下固定尺寸+中间拉伸，里面放内容

UI图：头尾是特殊的边框。中间也有边框无限拉升，里面要放图片
复制链接

扫一扫

专栏目录

Web前端与移动开发之复合选择器 css元素显示模式背景属性.txt

07-30

1.复合选择器（1）后代选择器（包含选择器重要）语法：元素1 元素2 {样式声明} 选择器1 选择器2{ 属性：属性值 } 元素1和元素2用空格隔开元素1父亲元素2后代最终改变的是后代（元素2）的样式选择器可以是任意的基础选择器（2）子元素选择器（子选择器重要）语法元素1>元素2{样式声明} 元素1和元素2用>隔开元素1和元素2是父子关系只选择父元素最近一级的子元素即必须是亲儿子选择器1 选择器2可以是任意基础选择器（3）并集选择器（重要）可以选择多组标签定义相同样式通常用于集体声明语法元素1，元素2{样式声明} 元素1和元素2都改了样式逗号，为和的意思任何选择器都可以作为并集选择器约定的语法规范：并集选择器约定竖着写最后一个选择器不需要加逗号，（4）交集选择器语法选择器1选择器2选择器3{ 属性：属性值； } 用选择器1选择元素集合A，用选择器2在A中选择元素标签名只能写在前面并且只能有一个标签（5）伪类选择器（只用于链接用：表示） a:link 未访问过的链接 a:visitied 已访问过的链接 a:hover 选择鼠标经过的链接/悬停时链接 a:active 选择的是鼠标正在按下没有弹起的链接注意：按照LVHA的顺序写链接在浏览器中有默认样式所以一般需要单独指定（6）焦点选择器（对input标签）用于选取获得焦点（光标选中）的表单元素语法表单元素：focus{ 属性：属性值； } 注意：表单元素最常用的是input 在input框选中时显示的样式 2.css的元素显示模式 html元素一般分为块元素和行内元素（1）块级元素 div p h1-h6 ul ol li ①独占一行 ②宽度高度外边距内边距都可控制 ③宽度默认是容器（父级元素）100%的宽度 ④是一个容器及盒子里面看可以放行内或块级元素 ⑤文字类的元素如p h1-h6里面不能放块级元素尤其是div （2）行内元素 a strong b em i del s ins u span ①相邻行内元素在一行上，一行可以显示多个 ②宽高直接设置是无效的 ③默认宽度就是他本身内容的宽度 ④行内元素只能容纳文本或其他行内元素 ⑤链接（a标签）里面不能再放链接但可以放块级元素比如图片（3）行内块元素 img input td ①一行上可以有多个行内块元素中间有空隙（行内元素特点） ②默认宽度就是他本身内容的宽度（行内元素特点） ③宽高高度外边距内边距可以控制（块级元素特点）元素显示模式的转换（1）行内元素转块级元素 display：block；√ （2）块级元素转换为行内元素 display：inline；（3）行内块元素 display：inline-block√、单行文字垂直居中文字的行高line-height=盒子高度仅限于单行文字垂直居中 3.css的背景属性（1）背景颜色选择器{ background-color： transparent透明（透明）/color； } （2）背景图片（便于控制位置）常用于logo 装饰性的小图片或者超大图片 background-image： none（默认） | url（图片地址/路径）; （3）背景平铺 background-repate: repate（默认） | no-repate | repate-x（沿x轴/横向平铺） | repate-y（沿y轴/纵向平铺）; 注意：页面元素既可以添加背景颜色也可以添加背景图片 只不过背景图片在背景颜色上方即背景图片会压住背景颜色（4）背景图片的位置 background-position: x y; ①参数是方位名词 top | center | bottom | left | center | right 方位名词 x（ left | center | right） y（top | center | bottom） background-position: 水平垂直; background-position: center top ; background-position: top center ; 指定两个方位名词时与顺序无关指定一个方位名词时没有指定的那个默认是居中对齐 ②参数是精确单位前面x 后面y 顺序不可变若第一个是精确单位一定是x 则另一个垂直居中 ③混合单位有顺序要求第一个为x 第二个为y （5）背景固定 background-attachment: scroll | fixed ; （6）背景复合写法 background：颜色图片地址url 平铺滚动位置没有顺序要求（7）背景色半透明 background：rgba（0,0,0,0.3）取值0-1 0.3也可以写成.3 背景色半透明盒子里面内容不受影响

解决html中页面背景图拉伸问题

WeeCR7的博客

07-31

2529

代码如下： body { background: url("img/bg.jpg") no-repeat; height: 100%; width: 100%; overflow: hidden; background-size: cov...

参与评论您还未登录，请先登录后发表或查看评论

图片拉伸：拉伸两边，保持中间不动

Secret Island

11-19

6498

原文地址：https://www.jianshu.com/p/9352091f3a94 1.想要实现一个弹框，是对某项事务的说明，效果如下 2.试过使用slicing 不论你怎么调，中间的那个小尖尖都会变形或者是没有拉伸的效果，或者拉成很奇怪的东西 3.所以用代码来实现了思路既然要保证中间不变拉伸两边，那我们先拉伸左边，然后得到的图片拿来再拉伸右边，保证两次拉伸的距离...

css3实现一个div设置多张背景图片及background-image属性实例演示

09-27

主要介绍了css3实现一个div设置多张背景图片及background-image属性,同时对于css3背景渐变也做了详细的解释,水平渐变,左上角渐变等等方式,需要的朋友可以参考下

div+css实现鼠标放上去，背景跟图片都会变化。

10-30

div+css实现鼠标放上去，背景跟图片都会变化。

css实现背景图片拉伸

leafe920的专栏

12-25

1656

制作页面时，有时需要在表格内插入背景图,我们可以使用CSS进行控制，代码： style="background-image:url(./images/counter_bg.jpg);background-repeat: no-repeat;background-position: right bottom;" 其中，./images/counter_bg.jpg为显示图片路径。如果现在

CSS实现图片居中且缩放不影响图片纵横比

Einstellung的博客

03-09

4299

实现代码我们在编写页面代码的时候往往会需要添加图片。在使用过程中，获取的图片尺寸经常可能和页面需要的尺寸不一致，这时候就需要对获取图片进行缩放。对图片缩放有一定技巧，或者说是固定的编写代码套路。否则可能稍有不慎，就会导致图片被拉伸，失去原有纵横比。下面代码展示了一种保持图片纵横比缩放图片的套路。建议首先看一下这篇文章，使得基线位置和中线位置保持一致：图片垂直居中下面是代码： <!DOCTYPE html> <html> <head> &lt

css图片居中剪切，避免图片变形

weixin_45827203的博客

02-26

510

参考链接： css图片居中剪切，避免图片变形 https://blog.csdn.net/baidu_41205301/article/details/78764775

css背景图片拉伸

05-30

669

如何让背景图片拉伸填充，这个问题听起来似乎很简单。但是很遗憾的告诉大家。不是我们想的那么简单。比如一个容器（body,div,span）中设定一个背景。这个背景的长宽值在css2.1之前是不能被修改的。所以实际的结果是只能重复显示，所以出现了repeat,repeat-x,repeat-y,no-repeat这些属性。就是用来控制背景图片的显示的。所以一般用作背景图片的有2类：

css——背景图片 保持比例不变形

最新发布

努力、拼搏、奋进

06-20

2794

css——背景图片 保持比例不变形

CSS新特性:圆角边框多栏Gird布局背景设置

09-27

网页制作Webjx文章简介：到现在为止,只有一些已经工作的CSS3特性. 到现在为止，只有一些已经工作的特性，他们中的一些如下:圆角从web2.0开始，开始流行使用圆角，如果你不使用圆角，你的网站可能不会被列入web2.0网站

【css背景图片自适应】css怎么设置背景图片自适应大小

04-11

在css中，可以利用“background-size”属性设置背景图片自适应大小，该属性用于设置背景图片的大小，只需要给背景图片元素添加“background-size:cover;”样式，即可使背景图片的大小自适应。

CSS3系列教程:背景图片(背景大小和多背景图) 应用说明

12-13

背景图片/纹理有很多种使用方式，常常用于为添加网站的最佳的界面美化。现在它在CSS3中被重视，我们可以应用多背景图和背景图片尺寸来实现更完美的效果。 CSS3的背景图片大小可以写成 background-size:Apx Bpx;-Apx = x轴(图片宽度)-Bpx = y轴(图片高度) 了解了这些，我们开始体验这个特性吧：最好支持CSS3背景大小的浏览器是Safari和Opera，所以我们只需要使用-o和-webkit前缀。背景大小复制代码代码如下:#backgroundSize{ border: 5px solid #bd9ec4; background:url(image_1.e

css 设置全屏背景图片

01-19

如果你有一张比较绚烂的图片想做背景，可以这样设置：复制代码代码如下: body{ background:url(img.jpg); background-position:center; background-repeat:no-repeat; } 但效果很可能会是这样：图片没有重叠，居中，并且…她太小了，无法占领全部的页面。很可惜，CSS2中并没有图片全屏拉伸的属性，所以我自己想了个办法。利用一个DIV层，在里面装载一个IMG标签。然后设置DIV和IMG的大小为100%，并固定到屏幕最底层，这样就实现了完美的拉伸并最大化图片的目的。首先在Body中加入下面的代码：复制代码代

DIV+CSS中让布局、背景图片、文字内容居中的方法

12-13

在DIV CSS布局的页面里，从布局内容到页面里文章文字居中都是非常重要的，而css来设置居中也是非常简单的。　1、首先介绍使用css属性让整体布局的居中：　设置对象的父级内容居中，这里一个页面的为父级是什么呢？...

encodeSVG:一个很棒的工具，用于将SVG图片编码为CSS背景图像代码

05-24

此工具是学生时代写前端时候，将SVG图片encode为css background-image的小工具，后面域名已经莫得了，现在估计也没人在用这个工具了，留待以后整理 @todo 迁移到gitee 线上工具地址【传送门】: 用的方便还请给个star...

利用jQuery和CSS将背景图片拉伸

11-22

也就是说使用一张固定尺寸的背景图片，让它在页面中随着浏览器尺寸进行拉伸，就像我们的电脑桌面壁纸效果。本文将带您一起使用jQuery和CSS实现背景图片拉伸效果。将背景图片拉伸，而不是平铺，注意平铺效果我们...

CSS3教程(5):网页背景图片

01-19

现在它在CSS3中被重视，我们可以应用多背景图和背景图片尺寸来实现更完美的效果。 背景图片/纹理有很多种使用方式，常常用于添加网站的最佳的最终美化。现在它在CSS3中被重视，我们可以应用多背景图和背景图片尺寸来...

CSS设置背景图片模糊内容不模糊的解决方法

09-27

最近做项目遇到这样的需求一个div设置了background: url，现在需要使图片背景模糊，div内的文字清晰显示。具体解决方法大家参考下本

如何css设置一个伪元素::before图片

06-12

要设置一个伪元素的::before图片，可以使用以下的CSS代码： ``` .element::before { content: ""; display: block; width: 100px; height: 100px; background-image: url("your-image-url"); background-repeat: no-repeat; background-size: cover; } ``` 在这个代码中，我们首先使用`content`属性来创建一个空的伪元素，然后使用`background-image`属性来设置背景图片的URL。同时使用`background-repeat`属性来设置不重复平铺，`background-size`属性来设置背景图片的尺寸。最后，我们可以使用其他CSS属性来调整伪元素的位置和样式。

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

非常没帮助
没帮助
一般
有帮助
非常有帮助

提交