Фоновое изображение отображает определенную часть изображения - PullRequest
Новая
       15

Фоновое изображение отображает определенную часть изображения

1 голос
/ 13 марта 2019

У меня есть image здесь, что я хочу только определенную позицию, что отображать.Но у меня не работает.Я только хочу, чтобы руки смотрели без обрезки оригинала image.Заранее спасибо

enter image description here

Ожидаемый результат

enter image description here

HTML 

<div class="banner">
            <h1>できる限り<br>
                自然な形で育てた<br>
                こだわりの野菜です。</h1>
            <h4>生産者／川口太郎・川口久美子さん（安芸市）</h4>
</div>

CSS 

.banner{
    background: url(../img/img1.png);
    background-size: 100%;
    padding: 32% 0 5% 6%;
    color: white;
    letter-spacing: 0.1em;
    border-radius: 1%;
}

Ответы [ 3 ]

3 голосов
/ 13 марта 2019

Сочетание background-size и background-position атрибутов CSS.Не забывайте, что вы можете сделать размер фона больше 100%.Я бросил бы это в это и настроил бы оттуда: 

.banner{
  background: url(../img/img1.png);
  // background-size takes height and width but shorthand is one value used for both
  background-size: 200%;
  // background-position options include center, cover, and more: https://developer.mozilla.org/en-US/docs/Web/CSS/background-position
  background-position: center center;
}
0 голосов
/ 13 марта 2019

Смотря ваше ожидаемое изображение, я думаю, вы можете попробовать это: 

background-repeat: no-repeat;
background-size: cover;
background-position: top;
0 голосов
/ 13 марта 2019

Используйте CSS Clip. Вы можете обрезать свое изображение на странице без необходимости редактировать исходный файл изображения.

https://www.w3schools.com/cssref/pr_pos_clip.asp

...