background-image 자주 사용하는 패턴 메모

6369 단어 HTMLCSSSass슬림

목적



background-image에서 자주 사용하는 패턴 메모

sample01





슬림
  .pra
    h1 NIKE NIKE NIKE

sass
h1 {
  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

sass
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;
}

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;
  }
}

좋은 웹페이지 즐겨찾기