Как я могу применить фоновое изображение к некоторым кнопкам HTML и сделать так, чтобы изображение продолжалось там, где оно было в последний раз остановлено? - PullRequest
Новая
       3

Как я могу применить фоновое изображение к некоторым кнопкам HTML и сделать так, чтобы изображение продолжалось там, где оно было в последний раз остановлено?

2 голосов
/ 22 июня 2019

Я работаю над небольшой HTML-страницей, которая будет содержать несколько кнопок на странице.Я хотел бы добавить фоновое изображение к этим кнопкам и сделать так, чтобы фоновое изображение продолжалось там, где остановилось последнее (плюс поле между ними).

Вот быстрый макет, который я сделал в Photoshop, что я имею в виду (макет показан вверху, а используемый фон показан внизу):

Mock up of how the buttons should look

Если бы мне пришлось написать псевдокод для решения этой проблемы, это, вероятно, было бы: 

if Button and Image intersect: 
    Button.Background_image = Image_intersection

Код HTML и CSS, который я написал для этого HTMLстраница: 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Main Document</title>

    <style>
        *{
            background: lightblue;
        }
        p{
            color:Black;
        }
        button{
            color:red;
            padding: 30px;
            margin-right: 50px;
            border-radius: 40px;
            border:2px black solid;
            background-image: url('images/im.jpg')
            width:50%
            height:50%
        }
    </style>

</head>
<body>
    <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Quasi, harum.</p>
    <div class="buttons">
        <button>Button 1</button>
        <button>Button 2</button>
        <button>Button 3</button>
        <button>Button 4</button>
        <button>Button 5</button>
    </div>
    <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Id quaerat dignissimos aperiam incidunt molestias officiis ullam iusto consequuntur, obcaecati impedit nemo nesciunt ratione similique cumque? Deserunt reprehenderit pariatur officiis nisi natus. Cupiditate culpa mollitia ad beatae voluptates similique quos obcaecati magnam saepe commodi quae, facilis a assumenda suscipit ab? Aut?</p>
    
</body>
</html>

Этот HTML-код, однако, не выполняет то, что я намеревался сделать (показано на макете).Как я могу обойти это?

1 Ответ

0 голосов
/ 22 июня 2019

Вы можете поиграть со свойством background-position в соответствии с количеством кнопок. (Просмотр полного экрана для правильных позиций)

Редактировать: Для переменного количества кнопок вам может понадобиться использовать JavaScript, как показано ниже: 

let btns = document.querySelectorAll(".buttons button")
, step = 100/(btns.length - 1)

btns.forEach((btn, idx) => {
  btn.style.backgroundPositionX = idx*step + "%";
  btn.style.backgroundPositionY = "50%";
})
* {
  background: lightblue;
}

p {
  color: Black;
}

button {
  color: red;
  padding: 30px;
  margin-right: 50px;
  border-radius: 40px;
  border: 2px black solid;
  background: url(https://www.sarahsflowers.co.uk/wpcms/wp-content/uploads/2013/10/Orange-Silk-Gerbera-Wedding-Flower-Sample1.jpg) no-repeat center;
  background-position: 0% 50%;
}
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Quasi, harum.</p>
<div class="buttons">
  <button>Button 1</button>
  <button>Button 2</button>
  <button>Button 3</button>
  <button>Button 4</button>
  <button>Button 5</button>
  <button>Button 6</button>  
  <button>Button 7</button>
  <button>Button 8</button>
</div>
<br/>Image: <br/>
<img src="https://www.sarahsflowers.co.uk/wpcms/wp-content/uploads/2013/10/Orange-Silk-Gerbera-Wedding-Flower-Sample1.jpg" height="200"/>

<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Id quaerat dignissimos aperiam incidunt molestias officiis ullam iusto consequuntur, obcaecati impedit nemo nesciunt ratione similique cumque? Deserunt reprehenderit pariatur officiis nisi natus.
  Cupiditate culpa mollitia ad beatae voluptates similique quos obcaecati magnam saepe commodi quae, facilis a assumenda suscipit ab? Aut?</p>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...