반응형
에 배경 이미지 추가 요소
<div>요소에 배경 이미지를 포함 시킬 수 있습니까? 그렇다면 어떻게하면됩니까?
당신은 이것을 의미합니까?
<style type="text/css">
.bgimg {
background-image: url('../images/divbg.png');
}
</style>
...
<div class="bgimg">
div with background
</div>
CSS의 background속성 을 사용하여 그렇게 할 수 있습니다 . 몇 가지 방법이 있습니다.
ID 별
HTML : <div id="div-with-bg"></div>
CSS :
#div-with-bg
{
background: color url('path') others;
}
클래스 별
HTML : <div class="div-with-bg"></div>
CSS :
.div-with-bg
{
background: color url('path') others;
}
HTML에서 (악한)
HTML : <div style="background: color url('path')"></div>
어디서 :
- 색상 은 16 진수 또는 X11 색상 중 하나입니다.
- 경로 는 이미지의 경로 입니다
- 위치, 첨부 파일과 같은 다른 사람
background CSS 속성은 해당 구문에서 모든 background-xxx 속성의 연결입니다.
배경 : 배경색 배경 이미지 배경 반복 배경 첨부 배경 위치 ;
출처 : w3schools
예 :
<div style="background-image: url(../images/image.gif); height: 400px; width: 400px;">Text here</div>
이 스타일을 사용하면 반복없이 중앙 배경 이미지를 얻을 수 있습니다.
.bgImgCenter{
background-image: url('imagePath');
background-repeat: no-repeat;
background-position: center;
position: relative;
}
HTML에서 div에 대해이 스타일을 설정하십시오.
<div class="bgImgCenter"></div>
처럼 사용 ..
<div style="background-image: url(../images/test-background.gif); height: 200px; width: 400px; border: 1px solid black;">Example of a DIV element with a background image:</div>
<div style="background-image: url(../images/test-background.gif); height: 200px; width: 400px; border: 1px solid black;"> </div>
id로 img src 속성을 추가 할 수 있습니다 :
<body>
<img id="backgroundimage" src="bgimage.jpg" border="0" alt="">
</body>
CSS 파일 (스트레치 배경)에서 :
#backgroundimage
{
height: auto;
left: 0;
margin: 0;
min-height: 100%;
min-width: 674px;
padding: 0;
position: fixed;
top: 0;
width: 100%;
z-index: -1;
}
<div class="foo">Foo Bar</div>
그리고 CSS 파일에서 :
.foo {
background-image: url("images/foo.png");
}
<div id="imgg">Example to have Background Image</div>
스타일 태그에 아래 내용을 추가해야합니다.
.imgg(
background-image: url('C:\Users\ajai\Desktop\10.jpg');
)
참고 URL : https://stackoverflow.com/questions/5604859/adding-a-background-image-to-a-div-element
반응형
'Programing' 카테고리의 다른 글
| bash 스크립트를 디버깅하는 방법은 무엇입니까? (0) | 2020.06.08 |
|---|---|
| IB 아울렛 및 IBAction (0) | 2020.06.07 |
| MVVM에서 ViewModel 또는 Model이 INotifyPropertyChanged를 구현해야합니까? (0) | 2020.06.07 |
| ActionBarSherlock과 ActionBar 호환성의 차이점 (0) | 2020.06.07 |
| 힙 대 이진 검색 트리 (BST) (0) | 2020.06.07 |