Отзывчивый фон изменения диапазона

avatar
Aspid
8 апреля 2018 в 00:00
45
1
0

У меня есть три кнопки одинаковой высоты и ширины, с текстом и фоновыми значками справа. Для небольших экранов и отдельных слов я хотел бы переместить значки в нижнюю центральную часть кнопки. Есть ли способ сделать это на CSS? Я уже перепробовал все возможности фоновой позиции, но думаю, это не решение.

enter image description here

enter image description here

html {font-family:Verdana, sans-serif; }
a {text-decoration:none;  color: #fff; font-size: 28px;}

.head {display:flex;
flex-direction: row;
flex-wrap: wrap;
align-content: space-between;
justify-content: center;
padding: 5rem 0rem 0rem 0rem;
flex-grow: 1; flex-basis: 10%;}

.items {width: 20%;
margin:1rem; 
-webkit-border-radius: 6;
-moz-border-radius: 6;
border-radius: 6px;
color: #ffffff;
padding: 10px 10px 10px 10px;
text-decoration: none;
text-align:center;
float:left;

font-size:30px;
font-weight:100;
}
  
.items.cli {
background: #3498db;
  background-image: -webkit-linear-gradient(top, #3498db, #2980b9);
  background-image: -moz-linear-gradient(top, #3498db, #2980b9);
  background-image: -ms-linear-gradient(top, #3498db, #2980b9);
  background-image: -o-linear-gradient(top, #3498db, #2980b9);
  background-image: linear-gradient(to bottom, #3498db, #2980b9);
  filter: progid:DXImageTransform.Microsoft.gradient
    (startColorStr='#3498db', EndColorStr='#2980b9');
-ms-filter: "progid:DXImageTransform.Microsoft.gradient
    (startColorStr='#3498db', EndColorStr='#2980b9')";
}
.items.lab {
background: #5669ce;
  background-image: -webkit-linear-gradient(top, #5669ce, #3848a1);
  background-image: -moz-linear-gradient(top, #5669ce, #3848a1);
  background-image: -ms-linear-gradient(top, #5669ce, #3848a1);
  background-image: -o-linear-gradient(top, #5669ce, #3848a1);
  background-image: linear-gradient(to bottom, #5669ce, #3848a1);
  filter: progid:DXImageTransform.Microsoft.gradient
    (startColorStr='#5669ce', EndColorStr='#3848a1');
-ms-filter: "progid:DXImageTransform.Microsoft.gradient
    (startColorStr='#5669ce', EndColorStr='#3848a1')";
}
.items.cat {
background: #46b76b;
  background-image: -webkit-linear-gradient(top, #61a778, #2f7f49);
  background-image: -moz-linear-gradient(top, #61a778, #2f7f49);
  background-image: -ms-linear-gradient(top, #61a778, #2f7f49);
  background-image: -o-linear-gradient(top, #61a778, #2f7f49);
  background-image: linear-gradient(to bottom, #61a778, #2f7f49);
  filter: progid:DXImageTransform.Microsoft.gradient
    (startColorStr='#61a778', EndColorStr='#2f7f49');
-ms-filter: "progid:DXImageTransform.Microsoft.gradient
    (startColorStr='#61a778', EndColorStr='#2f7f49')";
}


.items.icon.cli span{
padding-right: 40px;
background: url(http://2.gravatar.com/avatar/8cabfaad34005e38ba1b9f05759d1e59?s=40&d=retro&r=g) no-repeat 0px;
background-size: 32px 32px;
background-origin:padding-box;
background-position:bottom right;
}
.items.icon.labo span{
padding-right: 40px;
background: url(http://0.gravatar.com/avatar/9f0ff6a662bd596a880212a3f47aa202?s=40&d=mm&r=g) no-repeat 0px;
background-size: 32px 32px;
background-origin:padding-box;
background-position:bottom right;
}
.items.icon.cata span{
padding-right:50px;
background: url(https://www.boxful.com/images/promo/xpromoCrossBoxfulGreen.png.pagespeed.ic.qY6WwgnbmD.png) no-repeat 0px;
background-size: 32px 32px;
background-origin:padding-box;
background-position:bottom right;
}

.itemscabecera a {margin: 0px; display: block; width: 100%; height: 100%;}
<section class="head">

<div class="items cli icon cli">
<a href="#"><span>Goodtimes</span></a></div>

<div class="items lab icon labo"><a href="#"><span>Wintersnow</span></a></div>

<div class="items cat icon cata"><a href="#">
<span>Spring is here</span></a></div>

</section>
Источник
Temani Afif
8 апреля 2018 в 00:07
0

используйте его как обычное изображение, так будет проще

Friday Ameh
8 апреля 2018 в 00:08
0

Да, лучше использовать его как обычное изображение, а не как фон

Ответы (1)

avatar
s89_
8 апреля 2018 в 00:15
0

Будет проще, если вы добавите значки в свой элемент div как фактические элементы изображения, а не фон, как я сделал ниже. Вы также должны знать, что вы смешиваете % ширины с фиксированными размерами шрифта, что означает, что ваш текст выливается из вашего контейнера в моем решении ниже.

html {font-family:Verdana, sans-serif; }
a {text-decoration:none;  color: #fff; font-size: 28px;}

.head {display:flex;
flex-direction: row;
flex-wrap: wrap;
align-content: space-between;
justify-content: center;
padding: 5rem 0rem 0rem 0rem;
flex-grow: 1; flex-basis: 10%;}

.items {width: 20%;

margin:1rem; 
-webkit-border-radius: 6;
-moz-border-radius: 6;
border-radius: 6px;
color: #ffffff;
padding: 10px 10px 10px 10px;
text-decoration: none;
text-align:center;
float:left;

font-size:30px;
font-weight:100;
}
  
.items.cli {
background: #3498db;
  background-image: -webkit-linear-gradient(top, #3498db, #2980b9);
  background-image: -moz-linear-gradient(top, #3498db, #2980b9);
  background-image: -ms-linear-gradient(top, #3498db, #2980b9);
  background-image: -o-linear-gradient(top, #3498db, #2980b9);
  background-image: linear-gradient(to bottom, #3498db, #2980b9);
  filter: progid:DXImageTransform.Microsoft.gradient
    (startColorStr='#3498db', EndColorStr='#2980b9');
-ms-filter: "progid:DXImageTransform.Microsoft.gradient
    (startColorStr='#3498db', EndColorStr='#2980b9')";
}
.items.lab {
background: #5669ce;
  background-image: -webkit-linear-gradient(top, #5669ce, #3848a1);
  background-image: -moz-linear-gradient(top, #5669ce, #3848a1);
  background-image: -ms-linear-gradient(top, #5669ce, #3848a1);
  background-image: -o-linear-gradient(top, #5669ce, #3848a1);
  background-image: linear-gradient(to bottom, #5669ce, #3848a1);
  filter: progid:DXImageTransform.Microsoft.gradient
    (startColorStr='#5669ce', EndColorStr='#3848a1');
-ms-filter: "progid:DXImageTransform.Microsoft.gradient
    (startColorStr='#5669ce', EndColorStr='#3848a1')";
}
.items.cat {
background: #46b76b;
  background-image: -webkit-linear-gradient(top, #61a778, #2f7f49);
  background-image: -moz-linear-gradient(top, #61a778, #2f7f49);
  background-image: -ms-linear-gradient(top, #61a778, #2f7f49);
  background-image: -o-linear-gradient(top, #61a778, #2f7f49);
  background-image: linear-gradient(to bottom, #61a778, #2f7f49);
  filter: progid:DXImageTransform.Microsoft.gradient
    (startColorStr='#61a778', EndColorStr='#2f7f49');
-ms-filter: "progid:DXImageTransform.Microsoft.gradient
    (startColorStr='#61a778', EndColorStr='#2f7f49')";
}


.items.icon.cli span{
padding-right: 40px;
}
.items.icon.labo span{
padding-right: 40px;
}
.items.icon.cata span{
padding-right:50px;
}

.itemscabecera a {margin: 0px; display: block; width: 100%; height: 100%;}
<section class="head">

<div class="items cli icon cli">
<a href="#"><span>Goodtimes</span></a>
<img src="https://www.boxful.com/images/promo/xpromoCrossBoxfulGreen.png.pagespeed.ic.qY6WwgnbmD.png"/></div>

<div class="items lab icon labo"><a href="#"><span>Wintersnow</span></a><img src="https://www.boxful.com/images/promo/xpromoCrossBoxfulGreen.png.pagespeed.ic.qY6WwgnbmD.png"/></div>

<div class="items cat icon cata"><a href="#">
<span>Spring is here</span></a><img src="https://www.boxful.com/images/promo/xpromoCrossBoxfulGreen.png.pagespeed.ic.qY6WwgnbmD.png"/></div>

</section>