background-image 자주 사용하는 패턴 메모
목적
background-image에서 자주 사용하는 패턴 메모
sample01
슬림 .pra
h1 NIKE NIKE NIKE
sassh1 {
border-bottom: 1px solid black;
background-repeat: no-repeat;
background-size: contain;
background-image: image-url("lego.jpg");
background-position: right bottom;
}
sample02
슬림 .pra
h2 NIKE NIKE NIKE
sassh2 {
text-align: center;
border-bottom: 1px solid black;
background-repeat: no-repeat;
background-size: contain;
background-image:
image-url('lego.jpg'),
image-url('lego.jpg');
background-position:
left bottom,
right bottom;
}
sample03
슬림 .pra
.contain
h3 NIKE NIKE NIKE NIKE NIKE NIKE
p
| Just Do It Just Do It Just Do It Just Do It Just Do It Just Do It
br
| Just Do It Just Do It Just Do It Just Do It Just Do It Just Do It
br
| Just Do It Just Do It Just Do It Just Do It Just Do It Just Do It
br
| Just Do It Just Do It Just Do It Just Do It Just Do It Just Do It
br
| Just Do It Just Do It Just Do It Just Do It Just Do It Just Do It
br
| Just Do It Just Do It Just Do It Just Do It Just Do It Just Do It
br
| Just Do It Just Do It Just Do It Just Do It Just Do It Just Do It
br
| Just Do It Just Do It Just Do It Just Do It Just Do It Just Do It
br
| Just Do It Just Do It Just Do It Just Do It Just Do It Just Do It
sass.contain {
background-image: image-url('lego.jpg');
background-position: left top;
background-repeat: no-repeat;
background-size: 40px;
padding-left: 60px;
h3 {
padding-bottom: 10px;
width: 150px;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
p {
color: blue;
}
}
Reference
이 문제에 관하여(background-image 자주 사용하는 패턴 메모), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다
https://qiita.com/ko8@github/items/281694d2d6b8857aa261
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
.pra
h1 NIKE NIKE NIKE
h1 {
border-bottom: 1px solid black;
background-repeat: no-repeat;
background-size: contain;
background-image: image-url("lego.jpg");
background-position: right bottom;
}
.pra
h2 NIKE NIKE NIKE
h2 {
text-align: center;
border-bottom: 1px solid black;
background-repeat: no-repeat;
background-size: contain;
background-image:
image-url('lego.jpg'),
image-url('lego.jpg');
background-position:
left bottom,
right bottom;
}
.pra
.contain
h3 NIKE NIKE NIKE NIKE NIKE NIKE
p
| Just Do It Just Do It Just Do It Just Do It Just Do It Just Do It
br
| Just Do It Just Do It Just Do It Just Do It Just Do It Just Do It
br
| Just Do It Just Do It Just Do It Just Do It Just Do It Just Do It
br
| Just Do It Just Do It Just Do It Just Do It Just Do It Just Do It
br
| Just Do It Just Do It Just Do It Just Do It Just Do It Just Do It
br
| Just Do It Just Do It Just Do It Just Do It Just Do It Just Do It
br
| Just Do It Just Do It Just Do It Just Do It Just Do It Just Do It
br
| Just Do It Just Do It Just Do It Just Do It Just Do It Just Do It
br
| Just Do It Just Do It Just Do It Just Do It Just Do It Just Do It
.contain {
background-image: image-url('lego.jpg');
background-position: left top;
background-repeat: no-repeat;
background-size: 40px;
padding-left: 60px;
h3 {
padding-bottom: 10px;
width: 150px;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
p {
color: blue;
}
}
Reference
이 문제에 관하여(background-image 자주 사용하는 패턴 메모), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://qiita.com/ko8@github/items/281694d2d6b8857aa261텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)