百度360必应搜狗淘宝本站头条
grid 设置导航栏dedecms模版移位运算context xml
当前位置：网站首页 > 文章教程 > 正文

CSS3 背景切割和大小

xsobi 2024-12-31 15:26 1 浏览

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>

相关推荐

MySQL 正则表达式最全介绍

MySQL支持使用正则表达式进行模式匹配和文本搜索。正则表达式提供了一种强大的工具，可以用来匹配和检索字符串中的复杂模式。MySQL中的正则表达式功能主要在REGEXP或RLIKE运算符中使用。1....

正则前面的 (?i) (?s) (?m) (?is) (?im) 是什么意思

Q:经常看见的正则前面的(?i)(?s)(?m)(?is)(?im)是什么意思？...

SQL中的正则表达式

正则表达式通常用来匹配字符，比如在一段字符中截取我们想要的字符，又或者将不想要的字符串替换，或者统计某个或者某几个字符出现的次数，我们都可以使用Oracle提供的正则表达式语法来完成。1.比如，我们在...

学习VBA，报表做到飞 第四章 正则表达式 4.10 贪婪模式与懒惰模式

第四章正则表达式4.10贪婪模式与懒惰模式正则表达式匹配时默认为贪婪模式，也就是尽可能多的匹配。有时候我们需要对符合条件的内容分开匹配，就要用到懒惰模式。...

Python re模块 正则表达式之compile函数

一、应用场景为了重复利用同一个正则对象，需要多次使用这个正则表达式的话，使用re.compile()保存这个正则对象以便复用，可以让程序更加高效。二、使用方法...

几条常用的JavaScript正则表达式

在做项目或者代码编写过程中，一般会遇到验证电话、邮箱等格式是否正确合法的问题。通常我们会使用正则表达式，自己写很麻烦，且正则表达式又不是那么容易记住。所以现在分享几条常用的正则表达式，需要的时候直接复...

C语言中使用正则表达式

POSIX规定了正则表达式的C语言库函数，参见regex（3),我们已经学了很多C函数的用法读者应该具备自己看懂man手册的能力C语言中使用正则表达式一般分为三步：1.编译正则表达式regco...

VBA与Excel入门系列-12-正则表达式(上篇)

系统环境：Windows10...

系列专栏(八):JS的第七种基本类型Symbols

ES6作为新一代JavaScript标准，已正式与广大前端开发者见面。为了让大家对ES6的诸多新特性有更深入的了解，MozillaWeb开发者博客推出了《ES6InDepth》系列文章。CSDN...

EXCEL正则表达式的基础语法

正则表达式的基本概念及用途了解之后，我们就来学习下具体的语法，先以一个简单的例子来讲解。基础语法：比如，A1单元格中有一串字符：aabbccdd...

这几个冷门到你没听过的App，好用到为你打开新世界大门

一些好用的App总被埋没在数以百万计的应用商店中。今天为大家推荐几款Windows、Android、iOS、macOS平台里略显小众、但足够好用的遗珠App。万彩办公大师（Windows）转换Offi...

C/C++知识分享:C语言正则表达式

C语言的正则表达式规则，特此跟大家分享。一、C语言如何使用正则表达式？C语言使用正则表达式的方法很简单，只需要包含正则表达式头文件即可：...

Github工具库(二)

作者：Yunying...

在 JavaScript 中替换所有指定字符 3 种方法

在JS没有提供一种简便的方法来替换所有指定字符。在Java中有一个replaceAll()，replaceAll(Stringregex,Stringreplacement))方法...

正则表达式进阶

正则表达式，是每个程序员的必备的技能1.贪婪匹配和惰性匹配...

一周热门
最近发表
标签列表