내 생각에는 CSS에서 배경을 제어하는 배경이 하나뿐이지만 배경은 다음을 포함하는 복합 속성
입니다.
Background -color : 배경색, CSS에서 지원하는 색상 표현 방식을 사용할 수 있습니다.
Background-image : 배경 이미지( url)
background-repeat: 배경 반복 여부(반복, 반복 없음, 반복-x, 반복-y)
배경 위치: 배경 위치(키워드, 백분율, 픽셀)
배경 크기: 배경 크기
background-origin: 배경의 위치 지정 영역
background-clip: 배경 그리기 영역
background-attachment: 배경 이미지를 고정할지 아니면 페이지의 나머지 부분과 함께 스크롤할지 지정합니다
이 외에도 배경, 그라데이션, 마스크 등도 배경에 넣어보겠습니다.
하나씩 살펴보겠습니다 -0-.
처음에 말했듯이 저는 오랫동안 배경은 배경이라는 단어로만 생각했어요. 저는 항상
.p{ background: #000 url("1.jpg") no-repeat left center;/*颜色、图片、是否平铺、定位*/ }
라고 쓰거든요. 다들 저처럼 쓰는지 모르겠네요. 배경색, 배경 이미지, 중복 여부, 위치 지정 등 4가지 속성을 순차적으로 작성하는 방식은 매우 간단합니다.
기타 속성은 다음과 같습니다
.div{ width: 400px; height: 200px; padding: 20px; border:10px solid rgba(255,255,255,.2); background: #000 url("1.jpg") no-repeat; background-origin:border-box; /*background-origin:padding-box;*/ /*background-origin:content-box;*/ }
border-box
.div{ width: 400px; height: 200px; padding: 20px; border:10px solid rgba(0,0,0,.1); background:#000 url("1.jpg") no-repeat; /*background-clip:border-box;*/ /*background-clip:padding-box;*/ background-clip:content-box; }
다중 배경 이미지
이제 위와 같은 효과를 얻으려면 p 하나면 충분합니다. 링크: 데모
nbsp;html> <meta> <title>Title</title> <style> .div{ width: 240px; height: 150px; border:1px solid #000; background: url("1.jpg") no-repeat left top, url("2.jpg") no-repeat left bottom, url("3.jpg") no-repeat right bottom; background-size:100px auto, 100px auto, 100px auto; } </style> <div></div> 多个背景
그라디언트: 배경 이미지에 적용
-webkit-linear-gradient(起点[方向],color1 定位,color2 定位,...,colorN 定位);
渐变参数-起点:关键字、百分比、像素、角度(逆时针旋转)
渐变重复:-webkit-repeating-linear-gradient(起点,color1 定位,color2 定位,...,colorN 定位);
radial-gradient(position,shape,size,color);
position:定义径向渐变的圆心位置
shape:定义径向渐变的形状
size:确定径向渐变的结束形状大小
color:颜色
图中的at前的2个值是渐变大小(就是控制渐变形状的),at后的两个值是圆心
重复径向渐变:repeating-radial-gradient
div{ /* 要配合背景使用 */ background:url("1.jpg") no-repeat 50% 50%/100% 100%; -webkit-mask: url(1.png) 30px 10px/10px 10px; }
nbsp;html> <meta> <title>Title</title> <style> body{ background: #000; } div{ width: 400px; height: 300px; border:12px solid #000;/* 没起作用 */ background:url("1.jpg") no-repeat 50% 50%/100% 100%; -webkit-mask: url(1.png) 30px 10px/10px 10px; } </style> <div></div>
关键字:cover 等比缩放,保证填满容器,(配合背景定位,就实现图片居中了)
关键字:contain 等比缩放,容器可能会有缝隙
数值:x-控制图片宽, y-控制图片高
위 내용은 CSS 배경 관련 속성에 대한 자세한 소개의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!