CSS로 배경 이미지의 크기를 설정 하시겠습니까?
CSS로 배경 이미지의 크기를 설정할 수 있습니까?
나는 다음과 같은 것을하고 싶다 :
background: url('bg.gif') top repeat-y;
background-size: 490px;
그러나 그렇게하는 것은 완전히 잘못된 것 같습니다 ...
CSS2
이미지를 더 크게 만들어야하는 경우 이미지 편집기에서 이미지 자체를 편집해야합니다.
img 태그를 사용하면 크기를 변경할 수 있지만 이미지가 다른 내용의 배경이되어야하는 경우 원하는 결과를 얻지 못합니다 (원하는 것처럼 반복되지 않습니다) ...
CSS3 가 힘을 발휘하다
이것은 CSS3에서 할 수 background-size
있습니다.
모든 최신 브라우저는이 기능을 지원하므로 이전 브라우저를 지원할 필요가없는 경우이를 수행 할 수 있습니다.
지원되는 브라우저 :
Mozilla Firefox 4.0 이상 (Gecko 2.0 이상), Microsoft Internet Explorer 9.0 이상, Opera 10.0 이상, Safari 4.1 이상 (webkit 532) 및 Chrome 3.0 이상
.stretch{
/* Will stretch to specified width/height */
background-size: 200px 150px;
}
.stretch-content{
/* Will stretch to width/height of element */
background-size: 100% 100%;
}
.resize-width{
/* width: 150px, height: auto to retain aspect ratio */
background-size: 150px Auto;
}
.resize-height{
/* height: 150px, width: auto to retain aspect ratio */
background-size: Auto 150px;
}
.resize-fill-and-clip{
/* Resize to fill and retain aspect ratio.
Will cause clipping if aspect ratio of box is different from image. */
background-size: cover;
}
.resize-best-fit{
/* Resize to best fit and retain aspect ratio.
Will cause gap if aspect ratio of box is different from image. */
background-size: contain;
}
특히, 이전에는 없었던 새로운 제어 기능을 제공 하는 cover
및 contain
값이 마음에 듭니다.
일주
background-size: round
반복과 함께 의미를 갖는 것을 사용할 수도 있습니다 .
.resize-best-fit-in-repeat{
/* Resize to best fit in a whole number of times in x-direction */
background-size: round auto; /* Height: auto is to keep aspect ratio */
background-repeat: repeat;
}
이미지 너비를 배경 위치 영역에 여러 번 맞도록 조정합니다.
추가 참고
필요한 크기가 고정 픽셀 크기 인 경우 실제 이미지의 실제 크기를 조정하는 것이 좋습니다. 이것은 이미지 크기 조정 (이미지 소프트웨어가 브라우저보다 더 나은 작업을 제공함)을 향상시키고 원본 이미지가 표시하는 것보다 큰 경우 대역폭을 절약하기위한 것입니다.
CSS 3 만 지원합니다.
background-size: 200px 50px;
그러나 이미지 자체를 편집하여 사용자가 덜로드해야하며 앤티 앨리어싱이없는 축소 된 이미지보다 더 좋아 보일 수 있습니다.
사용자가 Opera 9.5 이상, Safari 3 이상, Internet Explorer 9 이상 및 Firefox 3.6 이상 만 사용한다면 대답은 그렇습니다. 그렇지 않으면 아닙니다.
배경 크기의 속성은 CSS 3의 일부이지만, 대부분의 브라우저에서 작동하지 않습니다.
귀하의 목적을 위해 실제 이미지를 더 크게 만드십시오.
불가능합니다 . 배경은 항상 가능한 한 크지 만으로 반복되지 않도록 할 수 있습니다 background-repeat
.
background-repeat: no-repeat;
둘째, 배경이 상자의 여백 영역으로 들어 가지 않으므로 배경을 상자의 실제 내용에만 표시하려면 패딩 대신 여백을 사용할 수 있습니다.
셋째, 배경 이미지가 시작되는 위치를 제어 할 수 있습니다. 기본적으로 상자의 왼쪽 상단이지만 다음과 background-position
같이을 사용 하여 제어 할 수 있습니다 .
background-position: center top;
또는 아마도
background-position: 20px -14px;
네거티브 포지셔닝은 CSS 스프라이트 와 함께 많이 사용됩니다 .
좀 더 깊이 들어가는 것을 두려워하지 않는다면 너무 어렵지 않습니다. :)
잊혀진 논쟁 이 하나 있습니다 .
background-size: contain;
이것은에서 background-image
와 같이 확장되지 않습니다 cover
. 더 긴면이 외부 컨테이너의 너비 나 높이에 도달 할 때까지 늘어나 이미지를 보존합니다.
편집 :도있다 -webkit-background-size
및 -moz-background-size
.
background-size 속성은 IE9 +, Firefox 4+, Opera, Chrome 및 Safari 5+에서 지원됩니다.
배경 크기 : 200px 50px 100 % 100 %로 변경하면 ul li 또는 div와 같은 콘텐츠 태그의 요구에 따라 확장됩니다 ... 시도
@tetra가 제공 한 답변을 지원하기 위해 이미지가 SVG 인 경우 실제 이미지의 크기를 조정할 필요가 없음을 지적하고 싶습니다.
SVG 파일은 단지 XML이므로 XML 내에 표시 할 크기를 지정할 수 있습니다.
그러나 다른 장소에서 동일한 SVG 이미지를 사용하고 다른 크기 여야하는 경우 사용하는 background-size
것이 매우 유용합니다. SVG 파일은 본질적으로 래스터 이미지보다 작으며 CSS를 사용하여 즉시 크기를 조정하는 것은 내가 알고있는 성능 비용 없이도 품질 손실이 거의 없거나 전혀없는 매우 유용합니다.
다음은 간단한 예입니다.
<div class="hasBackgroundImage">content</div>
.hasBackgroundImage
{
background: transparent url('/image/background.svg') no-repeat 10px 5px;
background-size: 1.4em;
}
(참고 : 이것은 Firefox 8, Safari 5.1 및 Chrome 16.0.912.63이 설치된 OS X 10.7에서 작동합니다.)
CSS3로 완전히 할 수 있습니다.
body {
background-image: url(images/bg-body.png);
background-size: 100%; /* size the background image at 100% like any responsive img tag */
background-position: top center;
background-repeat:no-repeat;
}
이렇게하면 배경 이미지의 크기가 본문 요소 너비의 100 %가되고 본문 요소의 해상도가 작아 질수록 배경의 크기가 조정됩니다.
예를 들면 다음과 같습니다. http://www.sccc.premiumdw.com/examples/resize-background-images-with-css/
브라우저 간 호환되도록 중첩 된 div가 있어야합니다.
<div>
<div style="background: url('bg.gif') top repeat-y;min-width:490px;">
Put content here
</div>
</div>
두 가지 <div>
요소 를 사용할 수 있습니다 .
하나는 컨테이너입니다 (원래 배경 이미지를 표시하려는 컨테이너 임).
두 번째는 안에 포함되어 있습니다. 크기를 배경 이미지의 크기 (또는 표시하려는 크기)로 설정합니다.
포함 된 div가 위치되도록 설정됩니다 absolute
. 이렇게하면 포함 div의 항목의 정상적인 흐름을 방해하지 않습니다.
스프라이트 이미지를 효율적으로 사용할 수 있습니다.
현재 버전의 CSS (2.1)로는 배경 이미지의 크기를 설정할 수 없습니다.
당신 만 설정할 수 있습니다 : position
, fix
, image-url
, repeat-mode
,와 color
.
put the below code in the body of you css file
background-image: URL('../images/wave-green-plain-colour.jpg') ;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
width:100px;
당신은 작성했습니다
background: url('bg.gif') top repeat-y;
background-size: 490px;
컨테이너의 크기에 따라 배경 만 표시됩니다.
배경 URL이있는 빈 컨테이너가 있고 배경 크기가 무엇이든 bg.gif가 표시되지 않습니다.
콘테이너의 크기를
background: url('bg.gif') top repeat-y;
background-size: 490px;
height: 490px;
width: 490px;
위에서 작성한 코드와 결합하면 bg.gif 파일을 볼 수 있습니다.
background-size
Chrome 4.1에서 작동하지만 지금까지 Firefox 3.6에서 작동하지 못했습니다.
버튼에는 배경 이미지를 사용하지만 너비와 높이를 설정하더라도 텍스트와 동일한 크기의 이미지 만 표시합니다. 대신 문자로
문자를 채 웁니다 (공백이 아닌 공백). 기본적으로 모든 버튼 배경이 나타날 때까지 필요한만큼 많이칩니다. 따라서 다음과 같은 코드가있을 수 있습니다.
스타일 시트에서 :
#v2menu-home {
background-image:url(../v2-siteimages/button.png);
background-repeat:no-repeat;
}
HTML 문서에서 :
<div id="v2menu">
<a id="v2menu-home" href="/index.php">home </a>
</div><!-- v2menu -->
예 :
배경 이미지는 항상 컨테이너 크기 (너비 100 % 및 높이 100px)에 맞습니다.
크로스 브라우저 CSS :
.app-header {
background: url("themes/default/images/background.jpg") no-repeat;
-moz-background-size: 100% 100px;
-webkit-background-size: 100% 100px;
-o-background-size: 100% 100px;
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src = "themes/default/images/background.jpg", sizingMethod = 'scale');
background-size: 100% 100px;
}
이것은 CSS3에서 배경 크기로 할 수 있습니다
.backgroungImage {
background: url('../imageS/background.jpg') no-repeat;
background-size: 32px 32px;
}
background-size
동일한 background
속성 으로 설정 하려면 다음을 사용할 수 있습니다.
background:url(my-bg.png) no-repeat top center / 50px 50px;
참고 URL : https://stackoverflow.com/questions/1341358/set-size-on-background-image-with-css
'development' 카테고리의 다른 글
Javascript에서 소수점 이하 두 자리로 부동 소수점을 구문 분석하는 방법은 무엇입니까? (0) | 2020.02.25 |
---|---|
줄 바꿈 문자를 만드는 방법? (0) | 2020.02.25 |
PowerShell이 Windows에서 Cygwin 셸을 교체 할 준비가 되셨습니까? (0) | 2020.02.25 |
다음 SDK 구성 요소의 라이센스 계약에 동의하지 않았습니다. (0) | 2020.02.25 |
Javascript에서 객체 배열을 어떻게 복제합니까? (0) | 2020.02.25 |