development

CSS로 배경 이미지의 크기를 설정 하시겠습니까?

big-blog 2020. 2. 25. 22:51

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+에서 지원됩니다.

^{-출처 : W3 Schools}

배경 크기 : 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&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</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

현재글CSS로 배경 이미지의 크기를 설정 하시겠습니까?

big-blog

CSS로 배경 이미지의 크기를 설정 하시겠습니까?

CSS로 배경 이미지의 크기를 설정 하시겠습니까?

CSS2

CSS3 _{^{가 힘을 발휘하다}}

일주

좀 더 깊이 들어가는 것을 두려워하지 않는다면 너무 어렵지 않습니다. :)

'development' 카테고리의 다른 글

'development'의 다른글

티스토리툴바

CSS로 배경 이미지의 크기를 설정 하시겠습니까?

CSS로 배경 이미지의 크기를 설정 하시겠습니까?

CSS2

CSS3 가 힘을 발휘하다

일주

좀 더 깊이 들어가는 것을 두려워하지 않는다면 너무 어렵지 않습니다. :)

'development' 카테고리의 다른 글

'development'의 다른글

관련글

티스토리툴바

CSS3 _{^{가 힘을 발휘하다}}