100CSS效果：背景撑开盒子

最新推荐文章于 2024-11-07 11:15:19 发布

weixin_30723433

最新推荐文章于 2024-11-07 11:15:19 发布

阅读量247

点赞数

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/gushixianqiancheng/p/10967205.html

本文介绍了一种使用CSS技巧使背景图片撑开盒子的方法，确保图片铺满盒子且不变形、不裁切、不重复，同时保持高度由图片决定。通过设置盒子的宽度、背景图片和使用伪类:after实现布局。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1、背景撑开盒子：
盒子里只放一张图片，盒子的宽度固定，盒子的高度由图片决定，图片铺满盒子且不变形、不裁切、不重复。
2、伪类问题：
div:before,在div元素内部的开始增加一个元素
div:after,在div元素内部的结束增加一个元素
```html:run
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        * {
            padding: 0;
            margin: 0;
        }
        .outer {
            border:10px green dashed;
            width: 900px; /*盒子的宽度固定，也可以是百分比,比如80%*/
            margin: 0 auto;
            background:100% no-repeat url(http://img.pconline.com.cn/images/upload/upc/tx/photoblog/1509/06/c5/12227263_12227263_1441518066203_mthumb.jpg);
        }
        .outer:after {/*也可以是.outer:before */
            content: ""; /*padding-top已经占据了整个盒子的高度，所以这里不能有任何内容，否则内容会下移到盒子外下方*/
            display: block;
            padding-top: 66.67%; /*66.67%=图片的高/宽；盒子的高度由图片决定,也可以是padding-bottom: 66.67%; */
        }
    </style>
</head>
<body>
<div class="outer"></div>
</body>
</html>
```

转载于:https://www.cnblogs.com/gushixianqiancheng/p/10967205.html

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

weixin_30723433

关注关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

前端【3】--CSS布局，CSS实现横向布局，盒子模型

qq_73704268的博客

01-16

1755

2、子级元素想要在父级元素内均匀分布需要计算设置margin，但不一定能均匀分布。2、子级元素想要在父级元素内均匀分布需要计算设置margin，但不一定能均匀分布。布局的子元素之间若存在换行符，会被浏览器解析为空白符，导致子元素之间有多余间隙。后，父级元素的高度不会被子元素撑开，可能导致后续元素向上移动。内联元素的特性：不独占一行，对宽高不支持，行内元素连续排列。内联块级元素的特性：不独占一行，但支持宽高设置，连续排列。1、子级元素均分父级元素需要计算设置宽度，但不一定能均分。

用CSS3制作精美的立体盒子装饰(附带制作过程和完整示例)

weixin_43641850的博客

08-16

1732

title: CSS3-肥宅快乐盒 date: 2020-08-15 22:57:30 tags: css index_img: https://cdn.jsdelivr.net/gh/LitStronger/pic@master/post/cssBox.jpg 先来看看这个肥宅盒子的效果 .

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

css背景图撑开盒子高度

chauncywu的博客

12-07

8616

本文原地址需求：给定1980px*1080px背景图，在网页显示时，图片宽度等于浏览器宽度，高度根据原图比例显示对应高度，假设图片最小宽度设置为1024px，则最小高度为1024/(1980*1080)=576px 问题：背景图，是作为容器的一个属性存在的，并不是作为容器的内容，除了宽高padding这类以外的属性，其他的一般不能撑开容器，想要用这张图撑开容器的话，在现有知识下只能想到用i...

html图片撑开盒子,css背景图撑开盒子高度

weixin_28841265的博客

06-05

2888

本文原地址需求：给定1980px*1080px背景图，在网页显示时，图片宽度等于浏览器宽度，高度根据原图比例显示对应高度，假设图片最小宽度设置为1024px，则最小高度为1024/(1980*1080)=576px问题：背景图，是作为容器的一个属性存在的，并不是作为容器的内容，除了宽高padding这类以外的属性，其他的一般不能撑开容器，想要用这张图撑开容器的话，在现有知识下只能想到用img标签...

CSS盒子效果

weixin_34100227的博客

10-15

263

CSS盒子效果：<!DOCTYPEhtml> <html> <head>  <metahttp-equiv="Content-Type"content="text/html;charset=utf-8"/> <!--声明当前页...

css 背景图片撑开容器高度

dianchu1694的博客

09-04

2493

background-image是属性，不是块元素的内容，是无法撑开高度的。要想实现这种效果，一般通过:after,:before来填充。 .teamDiv{ background: url(/image/home_team.jpg); background-repeat:no-repeat; background-size:100...

CSS设置盒子容器(div)高度(height)始终为100%

11-19

然而，直接在CSS中为一个元素（如`div`）设置`height: 100%`并不总是有效，因为这涉及到CSS布局中的层次关系和百分比高度的计算规则。这个问题在描述中已经有所提及，现在我们将深入探讨这个问题，并提供解决方案。 ...

jim-emacs-fun-tachyons-flex-css:功能CSS的列表

04-05

调试CSS：使用debug.css，或者是背景设置成特殊颜色来判断盒子的层级和关系是否正确（所有可见的div都给颜色是个好习惯）第一原理裸奔未使用框架替代用最基础的css原理（越来越快，几何速度上升）和替代（平方等于...

CSS 盒子模型

酷爱前端的小陈博客

05-07

463

页面布局要学习三大核心, 盒子模型, 浮动和定位. 学习好盒子模型能非常好的帮助我们布局页面. 1.1 看透网页布局的本质网页布局其实就是每一个大的盒子包小的盒子，然后一点点堆积起来，最后得以将网页搭建起来。网页布局过程： 1. 先准备好相关的网页元素，网页元素基本都是盒子 Box 。 2. 利用 CSS 设置好盒子样式，然后摆放到相应位置。 3. 往盒子里面装内容. 网页布局的核心本质：就是利用 CSS 摆盒子。 1.2 盒子模型（Box Model）组成 .

html图片高度撑开,CSS背景图撑开盒子高度

weixin_32123093的博客

06-17

1490

需求：给定1980px*1080px背景图，在网页显示时，图片宽度等于浏览器宽度，高度根据原图比例显示对应高度，假设图片最小宽度设置为1024px，则最小高度为1024/(1980*1080)=576px问题：背景图，是作为容器的一个属性存在的，并不是作为容器的内容，除了宽高padding这类以外的属性，其他的一般不能撑开容器，想要用这张图撑开容器的话，在现有知识下只能想到用img标签插入这张图，...

css 背景撑开盒子高度

qq_41498791的博客

11-29

826

背景图片撑开盒子需求：给定1980px1080px背景图，在网页显示时，图片宽度等于浏览器宽度，高度根据原图比例显示对应高度，假设图片最小宽度设置为1024px，则最小高度为1024/(19801080)=576px 问题：背景图，是作为容器的一个属性存在的，并不是作为容器的内容，除了宽高padding这类以外的属性，其他的一般不能撑开容器，想要用这张图撑开容器的话，在现有知识下只能想到用img标签插入这张图，撑开容器达到模拟背景的目的，当然这么做的话其他元素只能选择浮动或者定位来排版了。解决：图

CSS - 盒子模型

优快云

07-20

935

盒子模型 content-box border-box box-sizing padding padding妙用 border border三角 margin margin:0 auto 水平居中原理 margin:auto margin合并外边距合并 BFC margin负值

解决CSS给盒子设置内边距和边框时会撑大盒子的问题

lawidn56的博客

10-11

870

那么盒子最终的高度就是 100（height）+ 10（padding-top）+ 40（padding-boutton）+10 （上下方向boder总值）= 160。盒子最终的宽度就是 100（width）+ 20（padding-left）+ 30（padding-right）+10 （左右方向boder总值）= 160。原因：之所以会撑大盒子是因为在浏览器中会按照我们写的代码来计算一个最终的尺寸。原因：之所以会撑大盒子是因为在浏览器中会按照我们写的代码来计算一个最终的尺寸。

2.4 CSS 盒子模型

Yuanshigou9的博客

11-04

293

CSS 盒子模型

css实现div被图片撑开

weixin_50166856的博客

11-07

627

固定好盒子的宽度，高度随传过来的图片大小决定。

vue3中【html+css】盒子背景图设置为gif并撑满整个盒子

m0_67986791的博客

03-07

869

【代码】vue3中【html+css】盒子背景图设置为gif并撑满整个盒子。

【Web前端】CSS-盒子模型

亮点菌

09-08

5983

网页布局的核心本质：就是利用 CSS 摆盒子。网页布局过程： 1. 先准备好相关的网页元素，网页元素基本都是盒子 Box 。 2. 利用 CSS 设置好盒子样式，然后摆放到相应位置。 3. 往盒子里面装内容

css如何让图片自然布满盒子且不出现变形

一句话介绍不了

03-08

6068

html部分: <div clas="box"> <img src = "xxx" /> </div> css样式 width: 400px; height: 400px; display: flex; justify-content: center; align-items: center; border: 1px soli

父级div高度由内容撑开有三个子div diaplay：flex后三个盒子在同一行中间的盒子的高度由内容撑开我怎么让左边的盒子和右边的盒子的高度占满父盒子。设置了height：100%没有效果