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

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

易达

풀어 주다： 2020-06-06 13:19:45

원래의

2971명이 탐색했습니다.

이 글의 목표:

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은 사진 프레임으로 사진 표시 효과를 구현합니다 - 사례 분석(코드 예)