CSS로 배경 이미지에 크기를 설정하시겠습니까?
CSS로 배경 이미지의 크기를 설정할 수 있습니까?
나는 다음과 같은 일을 하고 싶습니다.
background: url('bg.gif') top repeat-y;
background-size: 490px;
하지만 그렇게 하는 것은 완전히 잘못된 것 같습니다.
CSS2
이미지를 크게 만들어야 하는 경우 이미지 편집기에서 이미지 자체를 편집해야 합니다.
img 태그를 사용하면 크기를 변경할 수 있지만 이미지가 다른 컨텐츠의 배경이 되어야 하는 경우 원하는 결과를 제공하지 않습니다(원하는 것처럼 반복되지 않습니다).
CSS3 unleash the powers
이것은 CSS3에서 가능합니다.background-size.
모든 최신 브라우저가 이를 지원하므로 오래된 브라우저를 지원할 필요가 없는 한 이렇게 할 수 있습니다.
지원되는 브라우저:
Mozilla Firefox 4.0+(Gecko 2.0+), Microsoft Internet Explorer 9.0+, Opera 10.0+, Safari 4.1+(웹킷 532) 및 Chrome 3.0+.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: no-repeat;
둘째, 배경은 상자의 여백 영역에 들어가지 않으므로 배경을 상자의 실제 내용물에만 두고 싶다면 패딩 대신 여백을 사용할 수 있습니다.
셋째, 배경 이미지가 어디에서 시작되는지 제어할 수 있습니다.기본적으로 상자의 왼쪽 상단 모서리이지만 다음과 같이 를 사용하여 제어할 수 있습니다.
background-position: center top;
아니면 아마도
background-position: 20px -14px;
CSS 스프라이트와 함께 네거티브 포지셔닝이 많이 사용됩니다.
조금 더 깊이 들어가는 것이 두렵지 않다면 너무 어렵지 않습니다 :)
잊혀진 논쟁이 하나 있습니다.
background-size: contain;
이렇게 하면 당신의 힘이 늘지 않습니다.background-image…의 와 cover할 수 있습니다. 긴 변이 외부 용기의 너비 또는 높이에 도달할 때까지 늘어나므로 이미지를 보존할 수 있습니다.
: : 도 도 있습니다-webkit-background-size그리고.-moz-background-size.
배경 크기 속성은 IE9+, Firefox 4+, Opera, Chrome 및 Safari 5+에서 지원됩니다.
background-size: 200px 50px 100%로 변경하고 ulli나 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 style="background: url('bg.gif') top repeat-y;min-width:490px;">
Put content here
</div>
</div>
2개를 사용하시면 됩니다.<div>요소:
하나는 컨테이너(본래 배경 이미지를 나타낼 위치)입니다.
두 번째 것은 안에 들어 있습니다.배경 이미지의 크기(또는 나타날 크기)로 크기를 설정합니다.
는 Δ Δ Δ Δ Δ Δ Δ Δ Δ Δ Δ Δ Δ 로 설정됩니다.absolutediv에 인 흐름을 . 이렇게 하면 div에 포함된 항목의 정상적인 흐름을 방해하지 않습니다.
스프라이트 이미지를 효율적으로 사용할 수 있습니다.
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;
현재 버전의 CSS(2.1)로는 배경 이미지의 크기를 설정할 수 없습니다.
다음만 설정할 수 있습니다.position,fix,image-url,repeat-mode,그리고.color.
글을 쓰셨습니다.
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-sizeChrome 4.1에서 작동하지만 지금까지는 Firefox 3.6에서 작동할 수 없었습니다.
버튼은 배경 이미지를 사용하는데 가로와 세로를 설정해도 텍스트와 같은 크기의 이미지만 보여줍니다.대신에, 나는 내 텍스트를 다음과 같이 패드로 내립니다. 문자분할되지않은공백않은공백) i back, the buttonground appears all, until basically in many as needed slap 분할되지 as기본적으로 버튼 배경이 모두 나타날 때까지 필요한 만큼 추가합니다.그래서 나는 다음과 같은 코드를 가질 수 있습니다.
스타일 시트에서:
#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:스저 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-sizebackground사용할 수 있는 속성:
background:url(my-bg.png) no-repeat top center / 50px 50px;
언급URL : https://stackoverflow.com/questions/1341358/set-size-on-background-image-with-css
'programing' 카테고리의 다른 글
| Ctrl + TEXT AREA에서 jQuery를 사용하여 입력합니다. (0) | 2023.09.07 |
|---|---|
| 카테고리별로 최신 4가지 아이템을 선택하는 방법은? (0) | 2023.09.07 |
| 부트스트랩 팝업 폭 변경 (0) | 2023.09.07 |
| 팬더 데이터 프레임에서 없음을 NaN으로 바꿉니다. (0) | 2023.09.07 |
| jQuery.each() index? (0) | 2023.09.07 |