百度360必应搜狗淘宝本站头条
python判断字典是否为空crontab每周一执行aes和des区别安装指定版本npmadb pull
当前位置：网站首页 > IT知识 > 正文

CSS3 背景切割和大小

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

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>

相关推荐

第7章 Linux磁盘管理—磁盘格式化和挂载

提醒：本文为合集文章，后续会持续更新！关注我，每日提升！7.3　格式化磁盘分区磁盘分区虽然分好区了，但暂时还不能用，我们还须对每一个分区进行格式化。所谓格式化，其实就是安装文件系统，Windows下的...

Linux三剑客之sed命令详解，小白也能看得懂!

sed全称为StreamEDitor，行编辑器，同时也是一种流编辑器，它一次处理一行内容。处理时，把当前处理的行存储在临时缓冲区中，称为“模式空间”(patternspace)，接着用sed命令处...

Rust语言介绍，新崛起的编程语言

Rust是一门系统编程语言，由于其独特的特点和性能，近年来备受开发者关注，是近几年发展最迅猛的编程语言之一。据StackOverflow开发者调查显示，Rust连续第八年被评为最受喜爱的编程语言，...

What does &quot; 2&gt;&amp;1 &quot; mean?

技术背景在Linux或Unix系统中，程序通常会将输出发送到两个地方：标准输出（stdout）和标准错误（stderr）。标准输出用于正常的程序输出，而标准错误则用于输出程序运行过程中产生的错误信息。...

玩转命令行:7 个高效 Linux 命令技巧，助你事半功倍!

日常的运维、开发、测试过程中，Linux命令行无疑是我们最常接触的界面之一。掌握一些不为人知但极具实用价值的命令技巧，不仅能大幅提升你的工作效率，更能在关键时刻帮你快速定位问题、批量处理任务、自动化...

作为测试人，如何优雅地查看Log日志?

作为一名测试工程师，测试工作中和Linux打交道的地方有很多。比如查看日志、定位Bug、修改文件、部署环境等。项目部署在Linux上，如果某个功能发生错误，就需要我们去排查出错的原因，所以熟练地掌握查...

Linux新手必备:20个高效命令轻松掌握!

Linux基本命令使用指南在现代计算机操作系统中，Linux因其开放性、灵活性和强大的功能，广泛应用于服务器和开发环境中。作为技术人员，掌握Linux的基本命令是非常重要的。在本文中，我们将重点介绍2...

如何在 Linux 中有效使用 history 命令?

在Linux中，每当你在终端输入一条命令并按下回车，这条命令就会被默默记录下来。而history命令的作用，就是让你回顾这些操作的足迹。简单来说，它是一个“命令行日记本”，默认存储在用户主目录...

Linux/Unix 系统中find命令用法

find是Linux/Unix系统中一个非常强大且灵活的命令，用于在目录层次结构中查找文件和目录。它允许你根据各种条件（如名称、类型、大小、权限、修改时间等）来搜索，并对找到的结果执行操作。基本...

阿里云国际站:如何通过日志分析排查故障?

本文由【云老大】TG@yunlaoda360撰写一、日志收集确定日志位置：应用程序日志：通常位于/var/log/或应用程序的安装目录下，例如Nginx的日志位于/var/log/ngi...

Linux History命令:如何显示命令执行的日期和时间

在Linux系统中，history命令是一个简单却强大的工具，它允许用户查看和重用之前执行过的命令。然而，默认情况下，history命令的输出仅显示命令的序号和内容，并不包含命令执行的日期和时间。这对...

在R语言中使用正则表达式

有时候我们要处理的是非结构化的数据，例如网页或是电邮资料，那么就需要用R来抓取所需的字符串，整理为进一步处理的数据形式。R语言中有一整套可以用来处理字符的函数，在之前的博文中已经有所涉及。但真正的...

网络安全实战:记一次比较完整的靶机渗透

0x01信息搜集nmap-sC-sV-p--A10.10.10.123-T4-oAnmap_friendzone访问80端口的http服务只发现了一个域名。0x02DNS区域传输因...

Java程序员必备的Linux命令

Java程序员必备的Linux命令作为一名Java开发者，在日常工作中难免会与Linux服务器打交道。熟练掌握一些常用的Linux命令，不仅能提高工作效率，还能让你在团队中显得更加专业。今天，我将带你...

linux shell 笔记——1

shell的格式开头#!/bin/bash或者#!/bin/sh开头系统变量：HOME、HOME、HOME、PWD、SHELL、SHELL、SHELL、USER,PATH等等比方：echo$...

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