CSS3 背景切割和大小（css背景图片裁剪）

myzbx 2025-01-23 19:51 16 浏览

background-clip 属性

规定背景的绘制区域：

border-box 背景被裁剪到边框盒。

padding-box 背景被裁剪到内边距框。

content-box 背景被裁剪到内容框。

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
*{
    margin: 0;
    padding: 0;
}
div{
    width: 300px;
    height: 300px;
    margin: 50px auto;
    padding: 50px;
    border: 50px solid rgba(255,0,0,0.5);

    background-image: url(img/yangmi.jpg);

    /*规定背景的绘制区域：*/
    /*background-clip: border-box;*//*背景会填充到边框*/

    /*background-clip: padding-box;*/

    background-clip: content-box;

}
</style>
</head>
<body>
<div>我是文字啊啊啊啊</div>
</body>
</html>

background-size 属性

background-size: length|percentage|cover|contain;

length 设置背景图像的高度和宽度。第一个值设置宽度，第二个值设置高度。如果只设置一个值，则第二个值会被设置为 "auto"。

percentage 以父元素的百分比来设置背景图像的宽度和高度。第一个值设置宽度，第二个值设置高度。如果只设置一个值，则第二个值会被设置为 "auto"。

cover 把背景图像扩展至足够大，以使背景图像完全覆盖背景区域。背景图像的某些部分也许无法显示在背景定位区域中。

contain 把图像图像扩展至最大尺寸，以使其宽度和高度完全适应内容区域。

<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Document</title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
div{
    width: 1000px;
    height: 427px;
    margin: 50px auto;
    border: 1px solid #000;


    background-image: url(img/guoba.jpg);
    background-repeat: no-repeat;


    background-size: %(参考宽高)|px|contain|cover;
    /*background-size: 1000px 427px;*/
    /*background-size: 100% 100%;*/

    /*按比例缩放背景图使其完全覆盖盒子 哪怕有些背景图显示不出来 也为所谓*/
    background-size: cover;


    /*等比例缩放背景图当一遍填满*/
    /*background-size: contain;*/
}
</style>
</head>
<body>
<div></div>
</body>
</html>

CSS 背景

上一篇：HTML图像、背景(笔记11)（html的背景图片代码）
下一篇：网页背景全屏就这?分享 1 段优质 CSS 代码片段!

CSS3 背景切割和大小（css背景图片裁剪）

相关推荐

使用VSCode模板提高Vue开发效率（vscode开发vue3）

吃透 Vue 项目开发实践|16个方面深入前端工程化开发技巧【下】

这么牛逼的cursor功能，赶紧用起来

用上Vue3，你真的变了吗?（vue3 key）

移动前端重构实战系列:5-7章（前端移动端主要技术有哪些）

说下你的vue项目的目录结构，该怎么划分?

8.7k star，一款超炫酷的动态可视化大屏项目

20个免费音乐音效下载网站，无版权素材商业影片也可用

什么是“恒定光圈”，什么是“浮动光圈”?-摄影早自习第331

谷歌SEO:外贸电商网站On-page SEO优化实战「附案例」