CSS3의 새로운 배경 속성

CSS3에서는 배경을 일부 변경했습니다. 가장 눈에 띄는 점은 4개의 새로운 속성을 추가할 뿐만 아니라 현재 속성을 조정하고 향상시키는 것입니다.

여러 배경 이미지

css3에서는 하나의 태그 요소에 여러 배경 이미지를 적용할 수 있습니다. 코드는 css2.0 버전과 유사하지만 참조된 이미지를 "," 쉼표로 구분해야 합니다. 첫 번째 이미지는 요소 상단에 위치한 배경이고, 그 아래에 다음과 같은 배경 이미지가 차례로 표시됩니다.

background-image: url(top-image.jpg), url(middle -image.jpg), url(bottom-image.jpg);

새 속성: 배경 클립

(1) background-clip: border; 배경이 테두리 테두리 아래에 표시되기 시작합니다.
(2) background-clip: padding; 테두리 테두리 아래가 아님
(3) background-clip: content; 배경은 테두리나 패딩 아래가 아닌 콘텐츠 영역 아래에 표시되기 시작합니다.
(4)Background-clip: no-clip;기본 속성 값, background-clip과 유사: border;

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>php中文网(php.cn)</title> 
<style type="text/css">  
  .back {
    border: 10px dotted black;
    padding: 35px;
    background: blue;
  }
  .back1 {
    border: 10px dotted black;
    padding: 35px;
    background: blue;
    background-clip: padding-box;
  }
  .back2 {
    border: 10px dotted black;
    padding: 35px;
    background: blue;
    background-clip: content-box;
  }
</style>
</head>
    <body>
            <div class="back"></div>
            <br>
            <div class="back1"></div>
            <br>
            <div class="back2"></div>
            <br>
    </body>    
</html>

새 속성: Background Origin

이 속성은 배경 위치와 함께 사용해야 합니다. background-position을 사용하여 테두리, 패딩 또는 콘텐츠 상자 콘텐츠 영역에서 위치를 계산할 수 있습니다. (배경 클립과 유사)
(1) background-origin: 테두리 테두리 위치에서 계산
(2) background-origin: 패딩 위치에서 계산
(3) background-origin: 콘텐츠; 콘텐츠 상자 콘텐츠 영역의 위치부터 계산

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>php中文网(php.cn)</title> 
  <style type="text/css">  
     .sample1,.sample2,.sample3{
        margin:20px;
        padding:15px;
        border: dashed 15px #993300;
        width:450px;
        height:150px;
        color:#fff;
        background:url(https://img.php.cn/upload/course/000/000/008/5801821694a3b224.jpg) no-repeat;
        }
        .sample1 {
        -moz-background-origin:border;
        background-origin:border-box;
        }
        .sample2 {
        -moz-background-origin:padding;
        background-origin:padding-box;
        }
        .sample3 {
        -moz-background-origin:content;
        background-origin:content-box;
        }
  </style>
</head>
    <body>
            <div class="sample1"></div>
            <br>
            <div class="sample2"></div>
            <br>
            <div class="sample3"></div>
            <br>
    </body>    
</html>

새 속성: 배경 크기

배경 크기 속성은 배경 이미지를 재설정하는 데 사용됩니다. 여러 속성 값이 있습니다:
(1) background-size: contain; 레이블 요소에 맞게 배경 이미지를 줄입니다(주로 픽셀 비율)
(2) background-size: 배경 이미지를 확대합니다. 전체 라벨 요소 크기(주로 픽셀 비율)로 확장됩니다.
(3) background-size: 100px 100px 배경 이미지 크기 조정
(4) background-size: 50% 100%; 콘텐츠 태그 요소의 크기에 따라 이미지의 크기를 조정하는 것입니다

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>php中文网(php.cn)</title> 
<style type="text/css">  
body
{
background:url(https://img.php.cn/upload/course/000/000/008/5801821694a3b224.jpg);
background-size:100px 60px;
background-repeat:no-repeat;
padding-top:40px;
}
</style>
</head>
<body>
  <p> 
    <img src="https://img.php.cn/upload/course/000/000/008/5801821694a3b224.jpg"  alt="CSS3" width="400" height="200">
  </p>
  <p>上面两个图片对比</p>
</body>
</html>

지속적인 학습

새로운 파일

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>php中文网(php.cn)</title> <style type="text/css"> #example1 { background-image: url(http://www.baidu.com/img/baidu_jgylogo3.gif), url(https://img.php.cn/upload/course/000/000/008/5801821694a3b224.jpg); background-position: right bottom, left top; background-repeat: no-repeat, no-repeat; padding: 100px; } </style> </head> <body> <div id="example1"></div> <p>CSS3对于background做了一些修改，最明显的一个就是采用设置多背景，不但添加了4个新属性，并且还对目前的属性进行了调整增强。</p> </body> </html>

제출하다 코드 재설정

자동운전