CSS3의 Background-orgin은 사진 프레임으로 사진 표시 효과를 구현합니다

집

웹 프론트엔드

CSS 튜토리얼

CSS3의 Background-orgin은 사진 프레임으로 사진 표시 효과를 구현합니다 - 사례 분석(코드 예)

易达

Jun 06, 2020 am 11:05 AM

css3

이 글의 목표:

1. background-origin 사용법을 숙지하세요.

질문:

1 순수 DIV+CSS를 사용하여 background-origin background-orgin

을 사용해야 합니다. CSS3의 Background-orgin은 사진 프레임으로 사진 표시 효과를 구현합니다 - 사례 분석(코드 예)

추가 지침:

1. 각 사진 프레임의 너비는 500px이고, 내부 텍스트 패딩은 20px이며, 테두리 크기는 20px입니다.

2. 배경 이미지로

이제 구체적인 작업을 해보겠습니다

1. 자료 준비: 루트 디렉터리에 이미지 폴더를 만들고 모든 관련 자료와 그림을 여기에 저장합니다. 2. index.html 만들기, 구조 작성, 구조 분석 방법

CSS3의 Background-orgin은 사진 프레임으로 사진 표시 효과를 구현합니다 - 사례 분석(코드 예) 아이디어 분석:

1. 목표는 위쪽과 아래쪽으로 나누어져 있으며 각 부분은 실제로 사진 프레임(경계선이 있는 div)과 함께 표시됩니다. , 첫 번째 부분이 완료되면 두 번째 부분을 복사할 수 있습니다 CSS3의 Background-orgin은 사진 프레임으로 사진 표시 효과를 구현합니다 - 사례 분석(코드 예)

2. 하지만 잘 보면 위 사진과 아래 사진의 표시가 여전히 첫 번째 div의 배경 이미지와 약간 다릅니다. 3. 각 부분은 실제로 테두리를 포함하는 DIV이고 배경 이미지는 문자열이 포함된 사진이고 위쪽과 아래쪽은 테두리 안에 있습니다. 문자열 부분에 간격이 포함됩니다

분석에 따르면 다음 코드

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>背景原点制作怀旧照片</title>
</head>

<body>
    <div class="container">
        <div class="photo xtf">
            <div class="content">谢霆锋年轻的样子，一个字帅</div>
        </div>
        <div class="photo zbz">
            <div class="content">张柏芝年轻的样子，一个字美</div>
        </div>
    </div>

</body>

</html>

3를 얻었습니다. 스타일을 작성하고, CSS 폴더를 만들고, 그 안에 새로운 index.css를 만듭니다. 내부에 스타일을 작성하는 방법은, 다음은 분석 아이디어입니다.

Think 분석:

1. .container *

Think 분석

1. 컨테이너에 있는 모든 요소의 공통 스타일을 설정하려면 다음과 같은 공통 코드를 사용하세요. .container * style

그래서 index.css에 다음 코드를 추가하세요:

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

2. .photo photo

1. 요구 사항에 따라 테두리는 20px로 표시되며, 코드는 border-입니다. width: 20px ;border-style: dashed; 내부 텍스트에 간격이 있으므로 padding:20px,font-weight:bold, 색상은 흰색입니다. color:#fff;

전체 너비가 500이므로 width=500-( 테두리 2개 20+20+2 패딩20+20)=420, 높이도 420이므로 너비: 420, 높이: 420

그러므로 index.css에 다음 코드를 추가하세요.

.photo {
    width:420px; 
    height: 420px;
    border-width:20px;
    border-style: dashed;
    padding:20px; 
    font-weight:bold; 
    color:#fff; 
}

3 첫 번째 사진 설정

이 사진의 테두리가 빨간색이므로 border-color: red 그러면 배경은 잘생긴 남자의 사진이고 효과를 보면 점선 사이의 색상이 회색인 #ccc임을 알 수 있습니다. so background:#ccc url(. ./images/CSS3의 Background-orgin은 사진 프레임으로 사진 표시 효과를 구현합니다 - 사례 분석(코드 예)) no-repeat; 가장 중요한 것은 배경 이미지가 패딩에서 시작된다는 것입니다. 따라서

background-origin: padding-box; 여기에 주의하세요.

배경 원본을 적용하려면

배경에서 no-repeat

속성을 설정해야 하므로 index.css에 다음 코드를 추가하세요.

.xtf{
    background:#ccc url(../images/CSS3의 Background-orgin은 사진 프레임으로 사진 표시 효과를 구현합니다 - 사례 분석(코드 예)) no-repeat; 
    border-color: red;
    background-origin: padding-box;
}

4. 설정 이 사진의 테두리가 주황색이므로 border-color: orange 그러면 배경은 아름다운 여성의 사진이고 효과를 보면 점선 사이의 색상이 회색임을 알 수 있습니다. #ccc, 그래서 background:#ccc url(../images/CSS3의 Background-orgin은 사진 프레임으로 사진 표시 효과를 구현합니다 - 사례 분석(코드 예)) no-repeat; 가장 중요한 것은 배경 이미지가 테두리에서 시작된다는 것입니다. 따라서 background-origin: border-box;

background-origin이 적용되려면 background에서 no-repeat 속성을 설정해야 합니다

그러므로 index.css에 다음 코드를 추가하세요.

.zbz{
    background:#ccc url(../images/CSS3의 Background-orgin은 사진 프레임으로 사진 표시 효과를 구현합니다 - 사례 분석(코드 예)) no-repeat; 
    background-origin: border-box;
    border-color: orange;
}

지금까지 index.css의 전체 내용은 다음과 같습니다. 다음과 같습니다:

.container *{
    padding:0;
    margin:0;
}
.photo {
    width:420px; 
    height: 420px;
    border-width:20px;
    border-style: dashed;
    padding:20px; 
    font-weight:bold; 
    color:#fff; 
}
.xtf{
    background:#ccc url(../images/CSS3의 Background-orgin은 사진 프레임으로 사진 표시 효과를 구현합니다 - 사례 분석(코드 예)) no-repeat; 
    border-color: red;
    background-origin: padding-box;
}
.zbz{
    background:#ccc url(../images/CSS3의 Background-orgin은 사진 프레임으로 사진 표시 효과를 구현합니다 - 사례 분석(코드 예)) no-repeat; 
    background-origin: border-box;
    border-color: orange;
}

그런 다음 index.html에 index.css를 추가합니다

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>背景原点制作怀旧照片</title>
    <link href="css/index.css" rel="stylesheet" />
</head>

<body>
    <div class="container">
        <div class="photo xtf">
            <div class="content">谢霆锋年轻的样子，一个字帅</div>
        </div>
        <div class="photo zbz">
            <div class="content">张柏芝年轻的样子，一个字美</div>
        </div>
    </div>

</body>

</html>

실행 효과는 다음과 같습니다.

지금까지 모든 요구 사항을 달성했습니다

실제로 값을 설정하는 것 외에도 background-origin을 border-box, padding-box로, content-box로 설정할 수도 있습니다. 이런식으로 배경 원점은 콘텐츠가 시작점이므로 시도해 볼 수 있습니다

handsome의 사진 설정을 수정합니다. 남자 시에

.xtf{
    background:#ccc url(../images/CSS3의 Background-orgin은 사진 프레임으로 사진 표시 효과를 구현합니다 - 사례 분석(코드 예)) no-repeat; 
    border-color: red;
    background-origin: content-box;/**修改成content-box**/
}

运行结果为：

CSS3의 Background-orgin은 사진 프레임으로 사진 표시 효과를 구현합니다 - 사례 분석(코드 예)

我们就发现背景图片按照内容为原点显示了

总结：

1、学习了背景原点background-origin的用法，它有3个类型，

一个是border-box:背景图片以边框为起始点

一个是padding-box：背景图片以padding为起始点

一个是content-box：背景图片以内容为起始点

위 내용은 CSS3의 Background-orgin은 사진 프레임으로 사진 표시 효과를 구현합니다 - 사례 분석(코드 예)의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명

본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.

핫 AI 도구

Undresser.AI Undress

사실적인 누드 사진을 만들기 위한 AI 기반 앱

AI Clothes Remover

사진에서 옷을 제거하는 온라인 AI 도구입니다.

Undress AI Tool

무료로 이미지를 벗다

Clothoff.io

AI 옷 제거제

AI Hentai Generator

AI Hentai를 무료로 생성하십시오.

뜨거운 도구

Eclipse용 SAP NetWeaver 서버 어댑터

Eclipse를 SAP NetWeaver 애플리케이션 서버와 통합합니다.

PhpStorm 맥 버전

최신(2018.2.1) 전문 PHP 통합 개발 도구

안전한 시험 브라우저

안전한 시험 브라우저는 온라인 시험을 안전하게 치르기 위한 보안 브라우저 환경입니다. 이 소프트웨어는 모든 컴퓨터를 안전한 워크스테이션으로 바꿔줍니다. 이는 모든 유틸리티에 대한 액세스를 제어하고 학생들이 승인되지 않은 리소스를 사용하는 것을 방지합니다.

Dreamweaver Mac版

시각적 웹 개발 도구

MinGW - Windows용 미니멀리스트 GNU

이 프로젝트는 osdn.net/projects/mingw로 마이그레이션되는 중입니다. 계속해서 그곳에서 우리를 팔로우할 수 있습니다. MinGW: GCC(GNU Compiler Collection)의 기본 Windows 포트로, 기본 Windows 애플리케이션을 구축하기 위한 무료 배포 가능 가져오기 라이브러리 및 헤더 파일로 C99 기능을 지원하는 MSVC 런타임에 대한 확장이 포함되어 있습니다. 모든 MinGW 소프트웨어는 64비트 Windows 플랫폼에서 실행될 수 있습니다.