CSS3 背景切割和大小

liuian 2025-01-02 17:47 55 浏览

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 图片自适应

上一篇：现代CSS:纯 CSS 实现路径动画
下一篇：Web开发学习笔记(34)——CSS3(8)新增特效7

CSS3 背景切割和大小

相关推荐

【验证码逆向专栏】vaptcha 手势验证码逆向分析

Python实现人事自动打卡，再也不会被批评

Psutil + Flask + Pyecharts + Bootstrap 开发动态可视化系统监控

一个解决支持HTML/CSS/JS网页转PDF(高质量)的终极解决方案

再见Swagger UI 国人开源了一款超好用的 API 文档生成框架，真香

网页转成pdf文件的经验分享网页转成pdf文件的经验分享怎么弄

C++ std::vector 简介

飞牛OS入门安装遇到问题，如何解决?

系统C盘清理:微信PC端文件清理，扩大C盘可用空间步骤

10款高性能NAS丨双十一必看，轻松搞定虚拟机、Docker、软路由

CSS3 背景切割和大小

相关推荐

【验证码逆向专栏】vaptcha 手势验证码逆向分析

Python实现人事自动打卡，再也不会被批评

Psutil + Flask + Pyecharts + Bootstrap 开发动态可视化系统监控

一个解决支持HTML/CSS/JS网页转PDF(高质量)的终极解决方案

再见Swagger UI 国人开源了一款超好用的 API 文档生成框架，真香

网页转成pdf文件的经验分享 网页转成pdf文件的经验分享怎么弄

C++ std::vector 简介

飞牛OS入门安装遇到问题，如何解决?

系统C盘清理:微信PC端文件清理，扩大C盘可用空间步骤

10款高性能NAS丨双十一必看，轻松搞定虚拟机、Docker、软路由

网页转成pdf文件的经验分享网页转成pdf文件的经验分享怎么弄