Используйте CSS для наложения изображения на градиент с отступом - PullRequest
Новая
       38

Используйте CSS для наложения изображения на градиент с отступом

0 голосов
/ 11 сентября 2018

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

(примечание: для простоты вопроса я изменилсямой код для div, но результат остается прежним)

Первоначально это было успешно сделано, например: 

<div class="myBtn_1">test button one</div>

.myBtn_1    
{ 
  border: solid 1px #ff00ff;
  background-image: url('https://picsum.photos/21?image=1080'), 
     linear-gradient(to right, rgba(141, 245, 146, 1), rgba(255, 255, 255, 1)); 
  background-repeat:   no-repeat;
  background-size:     auto 100%;
  width:               200px;
  height:              50px;
  padding-left:        65px; 
}

jfiddle, представляющий это можно найти: здесь

ОДНАКО Я хочу, чтобы вокруг моего изображения внутри кнопки / div была некоторая рамка, поэтому я добавил background-position 5px 5px к CSS, а также явно установил размер фона (автоматически 40px).Это добавляет заполнение к изображению, но также добавляет заполнение к градиенту.

снова, смотрите 2-й класс в том же jfiddle

Вопрос: как создать кнопку / div в css с градиентом, покрывающим весь фон, а затем добавить изображение с отступом вокруг него?

Ответы [ 2 ]

0 голосов
/ 11 сентября 2018

Почему бы вам не использовать 

position: absolute;

на изображении и просто поместить его в div 

.myBtn_1    
{ 
  border: solid 1px #ff00ff;
  background-image: url('https://picsum.photos/21?image=1080'), 
     linear-gradient(to right, rgba(141, 245, 146, 1), rgba(255, 255, 255, 1)); 
  background-repeat:   no-repeat;
  background-size:     auto 100%;
  width:               200px;
  height:              50px;
  padding-left:        65px; 
}

.myBtn_2    
{ 
    border: solid 1px #ff00ff;
    background-image: url('https://picsum.photos/21?image=1080'), linear-gradient(to right, rgba(141, 245, 146, 1), rgba(255, 255, 255, 1)); 
    background-repeat:   no-repeat;
    background-size:     auto 40px;
    width:               200px;
    height:              50px;
    padding-left:        65px;
    background-position: 5px 5px;
}

.myBtn_3  
{ 
    border: solid 1px #ff00ff;
    background-image: linear-gradient(to right, rgba(141, 245, 146, 1), rgba(255, 255, 255, 1)); 
    background-repeat:   no-repeat;
    background-size:     auto 100%;
    width:               200px;
    height:              50px;
    padding-left:        65px;
    position: relative;
}

.myBtn_3 img {
  position: absolute;
  left: 5px;
  top: 5px;
  height: calc(100% - 10px)
}    
 
     
     
     <div class="myBtn_1">test button one</div>
<br />

<div class="myBtn_2">
     test button two
     </div>
<br />

<div class="myBtn_3">
     test button three
     <img src="https://picsum.photos/21?image=1080">
     </div>
0 голосов
/ 11 сентября 2018

Вы также можете разделять запятыми отдельные свойства фона. 

.myBtn_3    
{ 
    border: solid 1px #ff00ff;
    background-image: url('https://picsum.photos/21?image=1080'), linear-gradient(to right, rgba(141, 245, 146, 1), rgba(255, 255, 255, 1)); 
    background-repeat:   no-repeat;
    background-size:     auto 40px, auto auto;
    width:               200px;
    height:              50px;
    padding-left:        65px;
    background-position: 5px 5px, 0 0;
}
<div class="myBtn_3">
test button two
</div>
...