响应范围重新定位背景

Question

我有三个按钮，高度和宽度相同，右侧有文字和背景图标。对于较小的屏幕和单个单词，我想将图标重新定位到按钮的底部中心。有没有办法在CSS上做到这一点？我已经尝试了所有背景位置的可能性，但我想这不是解决方案。

80

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%;}

Answer 1

如果您将图标作为实际图像元素而不是背景添加到项目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>