백그라운드에서 CSS 이미지 확장 및 축소 - CSS만 사용
브라우저 뷰포트 크기에 따라 배경 이미지가 확장되고 확장되기를 원합니다.
스택 오버플로에서 예를 들어 확장 및 확장 CSS 배경과 같은 작업을 수행하는 몇 가지 질문을 참조하십시오.잘 작동하지만 다음을 사용하여 이미지를 배치합니다.background이 아닌img꼬리표를 달다
그 중에 animg태그가 배치되고, CSS를 사용하여 우리는 그것에 경의를 표합니다.img꼬리표를 달다
width:100%; height:100%;
그것은 효과가 있지만, 그 질문은 약간 오래되었고, CSS 3에서 배경 이미지 크기 조정이 꽤 잘 작동할 것이라고 말합니다.저는 이 예를 처음에 시도해 보았지만, 저에게는 잘 되지 않았습니다.
그것을 할 수 있는 좋은 방법이 있습니까?background-image선언?
는 CSS3라는 멋진 작은 .background-size:cover.
이렇게 하면 가로 세로 비율을 유지하면서 배경 영역이 배경 이미지로 완전히 가려지도록 이미지의 배율이 조정됩니다.전체 영역이 적용됩니다.그러나 크기가 조정된 이미지의 너비/높이가 너무 크면 이미지의 일부가 보이지 않을 수 있습니다.
CSS3 속성을 사용하면 꽤 잘 할 수 있습니다.크기가 비율에 따라 조정되므로 이미지 왜곡이 없습니다(작은 이미지를 업스케일링합니다).참고로 아직 모든 브라우저에서 구현되지 않았습니다.
background-size: 100%;
내가 언급한 코드를 사용하면...
HTML
<div id="background">
<img src="img.jpg" class="stretch" alt="" />
</div>
CSS
#background {
width: 100%;
height: 100%;
position: fixed;
left: 0px;
top: 0px;
z-index: -1; /* Ensure div tag stays behind content; -999 might work, too. */
}
.stretch {
width:100%;
height:100%;
}
이렇게 하면 원하는 효과를 얻을 수 있습니다. 내용만 스크롤되고 배경은 스크롤되지 않습니다.
배경 이미지는 화면 크기에 따라 브라우저 뷰포트 크기로 조정됩니다.내용이 브라우저 뷰포트에 맞지 않고 사용자가 페이지를 스크롤해야 할 경우 배경 이미지는 뷰포트에서 고정된 상태로 유지되며 내용은 스크롤됩니다.
CSS 3을 사용하면 훨씬 쉬울 것 같습니다.
CSS:
html,body {
background: url(images/bg.jpg) no-repeat center center fixed;
-webkit-background-size: cover; /* For WebKit*/
-moz-background-size: cover; /* Mozilla*/
-o-background-size: cover; /* Opera*/
background-size: cover; /* Generic*/
}
background-size: 100% 100%;
배경을 확장하여 두 축의 전체 요소를 채웁니다.
다음 CSS 부분은 모든 브라우저에서 이미지를 확장해야 합니다.
각 페이지에 대해 동적으로 수행합니다.그래서 저는 PHP를 사용하여 각 페이지에 대해 자체 HTML 태그를 생성합니다.모든 사진은 'image' 폴더에 있으며 'Bg.jpg'로 끝납니다.
<html style="
background: url(images/'.$pic.'Bg.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src=\'images/'.$pic.'Bg.jpg\', sizingMethod=\'scale\');
-ms-filter: \"progid:DXImageTransform.Microsoft.AlphaImageLoader(src=\'images/'.$pic.'Bg.jpg\', sizingMethod=\'scale\')\
";>
모든 페이지에 대한 배경 그림이 하나만 있는 경우에는 다음을 제거할 수 있습니다.$pic변수, 탈출 백슬래시를 제거하고 경로를 조정한 후 이 코드를 CSS 파일에 넣습니다.
html{
background: url(images/homeBg.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/homeBg.jpg', sizingMethod='scale');
-ms-filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/homeBg', sizingMethod='scale');
}
이것은 Internet Explorer 9, Chrome 21 및 Firefox 14에서 테스트되었습니다.
다음 CSS 사용:
background: url('img.png') no-repeat;
background-size: 100%;
실제로 img 태그를 사용하여 배경 이미지와 동일한 효과를 얻을 수 있습니다.Z 인덱스를 다른 모든 것보다 낮게 설정하고, 위치를 절대로 설정하고, 전경의 모든 상자에 투명 배경을 사용하면 됩니다.
이 클래스를 CSS 파일에 추가할 수 있습니다.
.stretch {
background: url(images/bg.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
작동 범위:
- Safari 3 이상
- Chrome Whating 이상
- Internet Explorer 9 이상
- Opera 10 이상(Opera 9.5 지원)
background-size하지만 키워드는 아닙니다.) - Firefox 3.6 이상(Firefox 4는 비벤더 접두사 버전을 지원)
그것은 CSS 트릭으로 설명됩니다: 완벽한 전체 페이지 배경 이미지.
데모: https://css-tricks.com/examples/FullPageBackgroundImage/progressive.php
코드:
body {
background: url(images/myBackground.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
용기 크기에 따라 이미지 크기를 적절하게 조정하려면 다음을 사용합니다.
background-size: contain;
background-repeat: no-repeat;
저는 이것을 사용하며, 이것은 모든 브라우저에서 작동합니다.
<html>
<head>
<title>Stretched Background Image</title>
<style type="text/css">
/* Remove margins from the 'html' and 'body' tags, and ensure the page takes up full screen height. */
html, body {height:100%; margin:0; padding:0;}
/* Set the position and dimensions of the background image. */
#page-background {position:fixed; top:0; left:0; width:100%; height:100%;}
/* Specify the position and layering for the content that needs to appear in front of the background image. Must have a higher z-index value than the background image. Also add some padding to compensate for removing the margin from the 'html' and 'body' tags. */
#content {position:relative; z-index:1; padding:10px;}
</style>
<!-- The above code doesn't work in Internet Explorer 6. To address this, we use a conditional comment to specify an alternative style sheet for IE 6. -->
<!--[if IE 6]>
<style type="text/css">
html {overflow-y:hidden;}
body {overflow-y:auto;}
#page-background {position:absolute; z-index:-1;}
#content {position:static;padding:10px;}
</style>
<![endif]-->
</head>
<body>
<div id="page-background"><img src="http://www.quackit.com/pix/milford_sound/milford_sound.jpg" width="100%" height="100%" alt="Smile"></div>
<div id="content">
<h2>Stretch that Background Image!</h2>
<p>This text appears in front of the background image. This is because we've used CSS to layer the content in front of the background image. The background image will stretch to fit your browser window. You can see the image grow and shrink as you resize your browser.</p>
<p>Go on, try it - resize your browser!</p>
</div>
</body>
</html>
저는 배경 이미지를 전체 페이지로 늘리지 않고 중심을 잡고 크기를 조정하고 가로 세로 비율을 유지하고 싶었습니다.이것은 다른 답변에서 제안된 변형 덕분에 저에게 효과가 있었습니다.
인라인 이미지: -----------------------
<div id="background">
<img src="img.jpg" class="stretch" alt="" />
</div>
CSS -----------------------------
html {
height:100%;
}
#background {
text-align: center;
width: 100%;
height: 100%;
position: fixed;
left: 0px;
top: 0px;
z-index: -1;
}
.stretch {
margin: auto;
height:100%;
}
감사합니다!
하지만 그 후 구글 크롬과 사파리 브라우저에서 작동하지 않았습니다(스트레칭은 효과가 있었지만 사진의 높이는 2mm에 불과했습니다!). 누군가 제게 다음과 같은 부족한 점을 알려줄 때까지:
설정시로 설정해 .
height:auto;min-height:100%;
그래서 당신을 위해 그것을 바꾸세요.height:100%;gives: 다, 음을제공선:
#### #background {
width: 100%;
height: 100%;
position: fixed;
left: 0px;
top: 0px;
z-index: -1;
}
.stretch {
width:100%;
height:auto;
min-height:100%;
}
새로 추가된 코드 바로 전에 DrupalTendu 테마에 이것이 있습니다.style.css:
html, 본문{높이:100%;}
#page{background:#ffffff;filename:자동!중요;높이:100%;최소높이:100%;위치:100%;}
그럼 사진으로 드루팔 내에 새로운 블록을 만들어서 추가해야 합니다.class=stretch:
< imgalt="" class="class" src="pic.url" />
해당 드루팔 블록에서 편집기로 사진을 복사하는 것만으로는 작동하지 않습니다. 편집기를 포맷되지 않은 텍스트로 변경해야 합니다.
가로와 세로가 100%인 absolute div의 이미지에 동의합니다.CSS에서 본문의 너비와 높이를 100%로 설정하고 여백과 패딩을 0으로 설정합니다.이 방법에서 발견할 수 있는 또 다른 문제는 텍스트를 선택할 때 선택 영역이 때때로 배경 이미지를 포함할 수 있으며, 이는 전체 페이지가 선택된 상태가 되도록 하는 유감스러운 영향을 미칩니다.다음을 사용하여 이 문제를 해결할 수 있습니다.user-select:none다음과 같은 CSS 규칙:
<html>
<head>
<style type="text/css">
html,body {
height: 100%;
width: 100%
margin: none;
padding: none;
}
#background {
width: 100%;
height: 100%;
position: fixed;
left: 0px;
top: 0px;
z-index: -99999;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-o-user-select: none;
user-select: none;
}
#background img {
width: 100%;
height: 100%;
}
#main{ z-index:10;}
</style>
</head>
<body>
<div id="main">
content here
</div>
<div id="background"><img src="bg.jpg"></div>
</body>
</html>
여기서도 Internet Explorer는 사용자 선택 옵션을 인식하지 못하기 때문에 Internet Explorer 10 미리 보기조차 지원하지 않으므로 JavaScript를 사용하여 배경 이미지 선택을 방지하거나(예: http://www.felgall.com/jstip35.htm ) CSS 3 배경 탐색 방법을 사용할 수 있습니다.
또한 SEO의 경우 배경 이미지를 페이지 하단에 배치하지만 배경 이미지를 로드하는 데 시간이 너무 오래 걸리는 경우(즉, 처음에는 흰색 배경) 페이지 상단으로 이동할 수 있습니다.
저는 이상적인 스케일링 배경 이미지를 얻기 위해 배경-X CSS 속성의 조합을 사용했습니다.
background-size: cover;
background-repeat: no-repeat;
background-position: center;
background-attachment: fixed;
이렇게 하면 배경이 항상 전체 브라우저 창을 덮고 스케일링할 때 가운데로 유지됩니다.
Backstretch 플러그인을 사용합니다.여러 개의 이미지를 슬라이드할 수도 있습니다.그것은 또한 용기 안에서 작동합니다.예를 들어 이런 방식으로 배경의 일부만 배경 이미지로 덮을 수 있습니다.
제가 그것을 작동시킬 수 있었기 때문에 플러그인을 사용하기가 쉽다는 것을 증명했습니다 :).
다음은 저에게 효과가 있었습니다.
.back-ground {
background-image: url("../assets/background.png");
background-size: 100vw 100vh;
}
다른 차원의 배경 전체를 커버하기 위해 작동했던.
내용을 수평으로 중앙에 배치하려면 다음과 같은 조합을 사용합니다.
background-repeat: no-repeat;
background-size: cover;
background-position: center;
이것은 아름답게 보일 것입니다.
다음 CSS 사용:
background-size: 100% 100%
속성을 사용하여 테두리까지 이미지 크기를 조정할 수 있습니다.배경 이미지를 제공하더라도 테두리 이미지가 그 위에 그려집니다.
그border-image속성은 스타일시트가 CSS 3을 지원하지 않는 곳에서 구현된 경우 매우 유용합니다.만약 당신이 구글 크롬이나 파이어폭스를 사용하고 있다면, 저는 그것을 추천합니다.background-size:cover재산 자체.
하나의 이미지만 사용하여 이 작업을 수행하시겠습니까?왜냐하면 여러분은 실제로 두 개의 이미지를 사용하여 기지개를 켜는 배경과 유사한 것을 만들 수 있기 때문입니다.예를 들어 PNG 이미지.
전에 해본 적이 있는데 그렇게 어렵지는 않아요.게다가, 저는 스트레칭이 단지 배경의 질을 해칠 것이라고 생각합니다.그리고 거대한 이미지를 추가하면 컴퓨터와 브라우저의 속도가 느려집니다.
언급URL : https://stackoverflow.com/questions/1150163/stretch-and-scale-a-css-image-in-the-background-with-css-only
'programing' 카테고리의 다른 글
| 패키지의 로컬 종속성입니다.제이손 (0) | 2023.06.03 |
|---|---|
| 이클립스의 SVN 비난 (0) | 2023.06.03 |
| 모듈에 중첩된 클래스 및 클래스를 사용해야 하는 경우 (0) | 2023.06.03 |
| 호를 사용하여 세터 재정의 (0) | 2023.06.03 |
| 용기 크기를 기준으로 글꼴 크기 조정 (0) | 2023.06.03 |