집 >웹 프론트엔드 >HTML 튜토리얼 >HTML 및 CSS의 배경 관련 속성

HTML 및 CSS의 배경 관련 속성

php中世界最好的语言원래의: 2018-03-13 11:46:221899검색

이번에는 HTML과 CSS의 배경 관련 속성을 소개하겠습니다. HTML과 CSS에서 배경 관련 속성을 사용할 때 주의할 점은 무엇인가요?

1. 배경 크기 속성

1. 배경 크기 속성이란 무엇입니까?
배경 크기 속성은 배경 이미지의 크기를 설정하는 데 특별히 사용되는 CSS3의 새로운 속성입니다. ;

value :

1.具体像素 >> background-size:200px 100px;
2.百分比 >> background-size:100% 80%;
3.宽度等比拉伸 >> background-size:auto 100px;
4.高度等比拉伸 >> background-size:100px auto;
5.cover >> background-size:cover;

5.1 이미지를 비례적으로 늘려야 함을 시스템에 알립니다.

5.2 너비 3499910bf9dac5ae3c52d5ede7383485 및 5db79b134e9f6b82c0b36e0489ee08ed element

6. contain >> background- size:contain;

6.1 이미지를 비례적으로 늘려야 한다고 시스템에 알립니다.

6.2 너비 3499910bf9dac5ae3c52d5ede7383485 또는 5db79b134e9f6b82c0b36e0489ee08ed 높이가 요소로 채워집니다(3499910bf9dac5ae3c52d5ede7383485 한 면만 채워지는 것을 보장합니다5db79b134e9f6b82c0b36e0489ee08ed)

background-size

II 배경 이미지 위치 지정 영역 속성

3499910bf9dac5ae3c52d5ede7383485

background-origin

5db79b134e9f6b82c0b36e0489ee08ed: 기본적으로 배경 이미지가 표시되기 시작하는 영역을 시스템에 알려줍니다. 패딩 영역에서 다음이 표시됩니다.

값:

1.<a>padding-box</a>:默认值 >>background-origin: padding-box; 告诉系统背景图片从什么区域开始显示,默认情况下就是从padding区域开始显示;
 2.<a>border-box</a> >>  background-origin:border-box; 从border位置开始
 3.<a>content-box</a> >>  background-origin:content-box;从content位置开始

<html lang="en"> <head>     <meta charset="UTF-8">     <title>113-背景图片定位区域属性</title>     <style>         *{             margin: 0;             padding: 0;         }         ul li{             list-style: none;             float: left;             width: 100px;             height: 100px;             text-align: center;             line-height: 100px;             border: 20px dashed #000;             padding: 50px;             margin-left: 20px;             background: url("images/dog.jpg") no-repeat;         }         ul li:nth-child(2){             /*             告诉系统背景图片从什么区域开始显示,             默认情况下就是从padding区域开始显示             */             background-origin: padding-box;         }         ul li:nth-child(3){             background-origin:border-box;         }         ul li:nth-child(4){             background-origin:content-box;         }     </style> </head> <body> <ul>     <li>默认</li>     <li>padding</li>     <li>border</li>     <li>content</li> </ul> </body> </html>

배경 이미지 위치 지정 영역 속성

3 . 배경 그리기 영역 속성

<a>background-clip:xxx;</a>背景绘制区域属性是专门用于指定从哪个区域开始绘制背景的, 默认情况下会从border区域开始绘制背景
<html lang="en"> <head>     <meta charset="UTF-8">     <title>114-背景绘制区域属性</title>     <style>         *{             margin: 0;             padding: 0;         }         ul li{             list-style: none;             float: left;             width: 100px;             height: 100px;             text-align: center;             line-height: 100px;             border: 20px dashed #000;             padding: 50px;             margin-left: 20px;             background: red url("images/dog.jpg") no-repeat;         }         ul li:nth-child(2){             /*             背景绘制区域属性是专门用于指定从哪个区域开始绘制背景的, 默认情况下会从border区域开始绘制背景             */             background-clip: padding-box;         }         ul li:nth-child(3){             background-clip: border-box;         }         ul li:nth-child(4){             background-clip: content-box;         }     </style> </head> <body> <ul>     <li>默认</li>     <li>padding</li>     <li>border</li>     <li>content</li> </ul> </body> </html>

배경 그리기 영역 속성(빨간색은 그리기 영역)

4. 다중 배경 그림

3499910bf9dac5ae3c52d5ede7383485먼저 추가된 배경 그림이 나중에 추가된 배경 그림을 덮습니다5db79b134e9f6b82c0b36e0489ee08ed

c3 요소 이후에는 여러 배경 그림을 설정할 수 있습니다

여러 배경 그림은 쉼표로 구분할 수 있습니다

background: url("images/animal1.png") no-repeat left top,url("images/animal2.png") no-repeat right top,url("images/animal3.png") no-repeat left bottom;

참고:

먼저 추가된 배경 이미지는 나중에 추가된 배경 이미지를 덮습니다

background: url("images/animal1.png") no-repeat left top,url("images/animal2.png") no-repeat right top,url("images/animal3.png") no-repeat left bottom,url("images/animal4.png") no-repeat right bottom,url("images/animal5.png") no-repeat center center;

분리하여 작성하는 것이 좋습니다 multiple backgrounds

background-image: url("images/animal1.png"),url("images/animal2.png"),url("images/animal3.png"); background-repeat: no-repeat, no-repeat, no-repeat; background-position: left top, right top, left bottom;

전체 코드는 다음과 같습니다:

9fd01892b579bba0c343404bcccd70fb 93f0f5c25f18dab9d176bd4f6de5d30e     a80eb7cbb6fff8b0ff70bae37074b813     b2386ffb911b14667cb8f0f91ea547a7115-多重背景图片6e916e0f7d1e588d4f442bf645aedb2f     c9ccee2e6ea535a969eb3f532ad9fe89         *{             margin: 0;             padding: 0;         }         p{             width: 500px;             height: 500px;             border: 1px solid #000;             margin: 0 auto;             /*             多张背景图片之间用逗号隔开即可             注意点:             先添加的背景图片会盖住后添加的背景图片             建议在编写多重背景时拆开编写             */             /*background: url("images/animal1.png") no-repeat left top,url("images/animal2.png") no-repeat right top,url("images/animal3.png") no-repeat left bottom,url("images/animal4.png") no-repeat right bottom,url("images/animal5.png") no-repeat center center;*/             background-image: url("images/animal1.png"),url("images/animal2.png"),url("images/animal3.png");             background-repeat: no-repeat, no-repeat, no-repeat;             background-position: left top, right top, left bottom;         }     531ac245ce3e4fe3d50054a55f265927 9c3bca370b5104690d9ef395f2c5f8d1 6c04bd5ca3fcae76e30b72ad730ca86d e388a4556c0f65e1904146cc1a846bee94b3e26ee717c64999d7867364b1b4a3 36cc49f0c466276486e50c850b7e4956 73a6ac4ed44ffec12cee46588e518a5e

Multiple background Images

four .Multiple background image contact

3499910bf9dac5ae3c52d5ede7383485先添加的背景图片会盖住后添加的背景图片5db79b134e9f6b82c0b36e0489ee08ed
9fd01892b579bba0c343404bcccd70fb 93f0f5c25f18dab9d176bd4f6de5d30e     a80eb7cbb6fff8b0ff70bae37074b813     b2386ffb911b14667cb8f0f91ea547a7116-多重背景图片-练习6e916e0f7d1e588d4f442bf645aedb2f     c9ccee2e6ea535a969eb3f532ad9fe89         *{             margin: 0;             padding: 0;         }         p{             width: 600px;             height: 190px;             border: 1px solid #000;             margin: 100px auto;                       background-image: url("images/bg-plane.png"),url("images/bg-sun.png"), url(images/bg-clouds.png);             background-repeat: no-repeat, no-repeat, no-repeat;             background-size: 50px 50px, 50px 50px, auto auto;          background-position: 50px 150px, 400px 50px, 0px 0px;             animation: move 10s linear 0s infinite normal;         }         @keyframes move {             from{                 background-position: 50px 150px, 400px 50px, 0px 0px;             }             to{                 background-position: 500px -150px, 400px 50px, -600px 0px;             }         }     531ac245ce3e4fe3d50054a55f265927 9c3bca370b5104690d9ef395f2c5f8d1 6c04bd5ca3fcae76e30b72ad730ca86d e388a4556c0f65e1904146cc1a846bee94b3e26ee717c64999d7867364b1b4a3 36cc49f0c466276486e50c850b7e4956 73a6ac4ed44ffec12cee46588e518a5e

이 기사의 사례를 읽은 후 방법을 마스터했다고 믿습니다. PHP 중국어 웹사이트의 다른 관련 기사도 주목해주세요!