Есть ли способ удалить или скрыть часть изображения с помощью CSS или JQuery - PullRequest
Новая
       25

Есть ли способ удалить или скрыть часть изображения с помощью CSS или JQuery

0 голосов
/ 07 ноября 2018

Я делаю веб-сайт с определенным фоновым изображением. Когда он меняет размер экрана, мне нужно удалить среднюю часть изображения, чтобы графика выглядела более тонкой. Вот картинка.

Вот как сейчас:

enter image description here

Вот как мне это нужно при смене экрана на планшет:

enter image description here

Мой HTML: 

<section class="hero" style="background-image: url(./images/hero.png)">
<header class="header">
  <img src="./images/logo.png" alt="Logo image" class="logo">
  <div class="shape hamburger">
    <!-- <a href="javascript:;" class="line-shape"><span class="hide">Hamburger icon</span></a> -->
    <a class="line-shape" href="javascript:;"><span></span><span class="hide">Hamburger icon</span></a>
    <span class="shape-txt" >MENU</span>
  </div>
</header>
<div class="row">
  <div class="col col-2 offset-2 col-2-t offset-2-t">
    <h1 class="section-title">
      Living our values
      Transforming our business
    </h1>
    <p class="txt">
      UDG Healthcare plc</br>
      Annual Report and Accounts 2015
    </p>
    <a href="javascript:;" class="padded"><span class="s s-down-arrow"><span class="hide">download</span></span>Download Full Report <span class="no-under">(PDF, 2.5 MB)</span></a>
  </div>
</div>
<span class="above-btn">Explore our year</br>
    in review</span>
<button type="button" class="down"><img src="./images/down.png" alt="Move to the top content"><span class="s s-down-arrow btn-arrow"><span class="hide">Move Down</span></span></button>

Мой css: 

.hero {
  background-repeat: no-repeat;
  background-size: cover;
  background-color: $hero-bg-cream;
  overflow: hidden;

  .row {
    margin: 0;
  }

  h1 {
    padding: 106px 0 7px;
    line-height: 1.15;
    word-spacing: 5px;
    letter-spacing: 0px;
    width: 70%;
    font-size: 40px;
    color: $grey;
  }

  .txt {
    line-height: 19px;
    padding-bottom: 14px;
    color: $grey;
  }

  .padded {
    padding-bottom: 421px;
  }

  .s-down-arrow {
    &:last-child {
      left: -38px;
      color: $grey;
      top: 0;
    }
  }

  .above-btn {
    font-size: 14px;
    text-align: center;
    display: block;
    padding-bottom: 16px;
    color: $grey;
  }

  .down {
    transform: translateX(13%);
  }

  @include breakpoint (tablet) {
    h1 {
      font-size: 29px;
      padding: 217px 0 7px;
    }

    .txt {
      padding-bottom: 10px;
    }

    .padded {
      padding-bottom: 308px;
    }

    .down {
      transform: translateX(10%);
    }
  }
}

Полагаю, мне нужно удалить правую часть изображения или что-то в этом роде?

Ответы [ 2 ]

0 голосов
/ 07 ноября 2018

Вы можете сделать это здесь в HTML: 

<section class="hero" style="background-image: url(./images/hero.png); background-size: 100% 100%;">

Или здесь, в CSS 

.hero {
  background-repeat: no-repeat;
  background-size: 100% 100%;
  background-color: $hero-bg-cream;
  overflow: hidden;

  .row {
    margin: 0;
  }
0 голосов
/ 07 ноября 2018

Хорошо, поэтому решение было сделать background-size: auto;

...