Background-clip in CSS3 implements three effects of image cropping (code example)-CSS Tutorial-php.cn

Home

Web Front-end

CSS Tutorial

Background-clip in CSS3 implements three effects of image cropping (code example)

易达

Jun 06, 2020 pm 04:59 PM

css3

Goals of this article:

1. Master the 3 implementations of background-clip background cutting

Question:

Required to achieve the following effects, using pure DIV CSS, must Use background-clip

Background-clip in CSS3 implements three effects of image cropping (code example)

Additional instructions:

1. The width of the photo frame is 500px, the height is 500px, the border is 20px wide, the text padding inside is 20, and the border The size is 20px

2. The image inside is used as the background image of the div

Now let’s do the specific operation

1. Prepare materials: create images in the root directory Folder, store all relevant material pictures here. The materials are

Background-clip in CSS3 implements three effects of image cropping (code example)

2. Create index.html, write the structure, and how to analyze the structure.

Idea analysis:

1. The goal is divided into 3 parts, upper and lower. Each part actually displays the same photo, so as long as the first photo is completed as required , the others can be copied

2. However, if you look closely, the display of each photo is still different. We found that the second photo is actually cropped based on the first photo. The cropped size is exactly the size of the border, which is equivalent to cropping the border. The third photo is cropped based on the second photo, and the cropped size is exactly the size of the padding inside. In other words, the third picture has removed the parts other than the content, which includes the padding part and the border

3. One part is a block element div, with a title, and then a border and padding. There is a content string, and finally a background image

According to the analysis, we get the following code

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>背景裁切案例演示</title>
</head>

<body>
    <div class="container">
        <!-- 裁切效果一 -->
        <h4 id="裁切效果一">裁切效果一</h4>
        <div class="photo  clip1">
            <div class="content">周慧敏，微微一笑，很倾城</div>
        </div>
        <h4 id="裁切效果二">裁切效果二</h4>
        <div class="photo  clip2">
            <div class="content">周慧敏，微微一笑，很倾城</div>
        </div>
        <h4 id="裁切效果三">裁切效果三</h4>
        <div class="photo  clip3">
            <div class="content">周慧敏，微微一笑，很倾城</div>
        </div>
    </div>
</body>
</html>

3. Write the style, create a css folder, and create a new index.css in it , how to write the styles inside, the following is the analysis idea

Think analysis:

1, .container *

Think analysis

1 . In order to set the common styles of all elements in the container, we can write these common codes into the .container * style

So add the following code to index.css:

.container *{
    padding:0;
    margin:0;
}

2. photo photo

Idea Analysis

1. According to the requirements, the border is 20px and the dotted line is displayed. The converted code is border-width: 20px; border-style: dashed; the text inside has spacing. , so padding: 20px, font-weight: bold, color is white color: #fff;

The overall width is 500, so width=500-(2 borders 20 20 2 padding20 20)=420, the height is also 420, so width: 420, height: 420

2. Because the border of this photo is dark red, border-color: indianred; and the background is a photo of a beautiful woman , and then it can be seen from the effect that the color between the dotted lines is gray, which is #ccc, so background:#ccc url(../images/Background-clip in CSS3 implements three effects of image cropping (code example)) no-repeat;
The most important thing is that its background image It starts from border, so background-origin: border-box; but the cropping point of each photo is different, but here we can define the common attributes of the photos here

So in index.css Add the code as follows:

.photo {
    width:420px; 
    height: 420px;
    border-width:20px;
    border-style:dashed;
    padding:20px; 
    font-weight:bold; 
    color:#fff; 
    background:#ccc url(../images/Background-clip in CSS3 implements three effects of image cropping (code example)) no-repeat; 
    border-color: indianred;
    background-origin: border-box;
}

3. 3 different cutting methods

1. The first cutting method is to use the border as the starting point to cut the parts outside the border. So background-clip: border-box;

2. The second cutting method is to use padding as the starting point to cut the parts other than padding, so background-clip: padding-box;

3. The third cutting method is to use content as the starting point to cut the part outside the content, so background-clip: content-box;
So add the following code to index.css:

.clip1{
    background-clip: border-box;
}
.clip2{
    background-clip: padding-box;
}
.clip3{
    background-clip: content-box;
}

So far, the entire content of index.css is as follows:

.container *{
    padding:0;
    margin:0;
}
.photo {
    width:420px; 
    height: 420px;
    border-width:20px;
    border-style:dashed;
    padding:20px; 
    font-weight:bold; 
    color:#fff; 
    background:#ccc url(../images/Background-clip in CSS3 implements three effects of image cropping (code example)) no-repeat; 
    border-color: indianred;
    background-origin: border-box;
}

.clip1{
    background-clip: border-box;
}
.clip2{
    background-clip: padding-box;
}
.clip3{
    background-clip: content-box;
}

Then introduce index.css into index.html

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>背景裁切案例演示</title>
    <link rel="stylesheet" href="css/index.css" />
</head>

<body>
    <div class="container">
        <!-- 裁切效果一 -->
        <h4 id="裁切效果一">裁切效果一</h4>
        <div class="photo  clip1">
            <div class="content">周慧敏，微微一笑，很倾城</div>
        </div>
        <h4 id="裁切效果二">裁切效果二</h4>
        <div class="photo  clip2">
            <div class="content">周慧敏，微微一笑，很倾城</div>
        </div>
        <h4 id="裁切效果三">裁切效果三</h4>
        <div class="photo  clip3">
            <div class="content">周慧敏，微微一笑，很倾城</div>
        </div>
    </div>
</body>
</html>

The running results are as follows:

Background-clip in CSS3 implements three effects of image cropping (code example)

So far, we have achieved all the requirements

Summary:

1. Learned 3 ways of background cropping, syntax format Yes

background-clip: border-box | padding-box | content-box | no-clip

border-box: means taking the border as the starting point and cutting the part outside the border

padding-box: means taking padding as the starting point, cutting the part outside the padding

content-box: taking the content as the starting point, cutting the part outside the content

The above is the detailed content of Background-clip in CSS3 implements three effects of image cropping (code example). For more information, please follow other related articles on the PHP Chinese website!

Statement

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

css怎么隐藏元素但不占空间Jun 01, 2022 pm 07:15 PM

两种方法：1、利用display属性，只需给元素添加“display:none;”样式即可。2、利用position和top属性设置元素绝对定位来隐藏元素，只需给元素添加“position:absolute;top:-9999px;”样式。

原来利用纯CSS也能实现文字轮播与图片轮播！Jun 10, 2022 pm 01:00 PM

怎么制作文字轮播与图片轮播？大家第一想到的是不是利用js，其实利用纯CSS也能实现文字轮播与图片轮播，下面来看看实现方法，希望对大家有所帮助！

css3如何实现鼠标点击图片放大Apr 25, 2022 pm 04:52 PM

实现方法：1、使用“:active”选择器选中鼠标点击图片的状态；2、使用transform属性和scale()函数实现图片放大效果，语法“img:active {transform: scale(x轴放大倍数,y轴放大倍数);}”。

css3什么是自适应布局Jun 02, 2022 pm 12:05 PM

自适应布局又称“响应式布局”，是指可以自动识别屏幕宽度、并做出相应调整的网页布局；这样的网页能够兼容多个不同的终端，而不是为每个终端做一个特定的版本。自适应布局是为解决移动端浏览网页而诞生的，能够为使用不同终端的用户提供很好的用户体验。

css3动画效果有变形吗Apr 28, 2022 pm 02:20 PM

css3中的动画效果有变形；可以利用“animation:动画属性 @keyframes ..{..{transform:变形属性}}”实现变形动画效果，animation属性用于设置动画样式，transform属性用于设置变形样式。

css3怎么设置动画旋转速度Apr 28, 2022 pm 04:32 PM

在css3中，可以利用“animation-timing-function”属性设置动画旋转速度，该属性用于指定动画将如何完成一个周期，设置动画的速度曲线，语法为“元素{animation-timing-function:速度属性值;}”。

css3线性渐变可以实现三角形吗Apr 25, 2022 pm 02:47 PM

css3线性渐变可以实现三角形；只需创建一个45度的线性渐变，设置渐变色为两种固定颜色，一个是三角形的颜色，另一个为透明色即可，语法“linear-gradient(45deg,颜色值,颜色值 50%,透明色 50%,透明色 100%)”。

一文了解CSS3中的新特性 ::target-text 选择器Apr 12, 2022 am 11:24 AM

本篇文章带大家一起深入了解一下CSS3中的新特性::target-text 选择器，聊聊该选择器的作用和使用方法，希望对大家有所帮助！

See all articles

Hot AI Tools

Undresser.AI Undress

AI-powered app for creating realistic nude photos

AI Clothes Remover

Online AI tool for removing clothes from photos.

Undress AI Tool

Undress images for free

Clothoff.io

AI clothes remover

AI Hentai Generator

Generate AI Hentai for free.

Hot Article

R.E.P.O. Energy Crystals Explained and What They Do (Yellow Crystal)

2 weeks agoBy尊渡假赌尊渡假赌尊渡假赌

How Long Does It Take To Beat Split Fiction?

1 months agoByDDD

R.E.P.O. Save File Location: Where Is It & How to Protect It?

1 months agoByDDD

R.E.P.O. Best Graphic Settings

2 weeks agoBy尊渡假赌尊渡假赌尊渡假赌

Assassin's Creed Shadows: Seashell Riddle Solution

1 weeks agoByDDD

Hot Tools

mPDF

mPDF is a PHP library that can generate PDF files from UTF-8 encoded HTML. The original author, Ian Back, wrote mPDF to output PDF files "on the fly" from his website and handle different languages. It is slower than original scripts like HTML2FPDF and produces larger files when using Unicode fonts, but supports CSS styles etc. and has a lot of enhancements. Supports almost all languages, including RTL (Arabic and Hebrew) and CJK (Chinese, Japanese and Korean). Supports nested block-level elements (such as P, DIV),