Question

我正在尝试在图像打开时在其下方放置一个按钮。我正在尝试使用该属性，但是该按钮显示在“图像框”的外部，我将放置一些图像以引用我在说什么。

现在alt属性是当前显示的文本。

我要显示“稍后购买”按钮的地方是沙滩椅。我正在使用的js插件称为lightcase.js

<div class="col-md-4 col-sm-6 fashion photography showcase" data-rel="lightcase">
    <a href="img/sale.png"  data-rel="lightcase"class="portfolio_item">
        <img src="img/womenn.png" alt="this t-shirt is awesome"class="img-responsive">
        <div class="portfolio_item_hover">
            <div class="portfolio-border clearfix">
                <div class="item_info">
                    <span>Women's Style </span> <em>Fashion</em>
                </div>
            </div>
        </div>
    </a>
</div>

Answer 1

如果您尝试将图像放在图像上方，然后在内部图像下方放置一个按钮

“上面写着沙滩椅，我想显示“稍后购买”按钮。”

然后尝试以下代码。

这将产生与问题中引用站点（https://imgur.com/a/BWOFadR）相同的输出。

.background-img {
  background-image: url("https://dummyimage.com/200x200/fedabc");
  width: 300px;
  height: 300px;
  position: relative;
  display: flex;
  flex-basis: 300px;
  flex-flow: column wrap;
  align-items: center;
  justify-content: center;
}

.image {}

<div class="background-img">
  <div class="inner_img">

    <div class="image"><img src="https://dummyimage.com/200x200"></img>
    </div>
    <button> button</button>
  </div>
</div>

Answer 2

在您的JavaScript中观看要加载的图片。如果要显示alt测试，它将在图像的加载阶段引发错误。此时，用按钮替换。

更直接地说，不，您不能简单地在alt文本中插入按钮。

基本上，以下javascript所做的是它获取图像并设置onload事件侦听器，如果发生错误，请使用按钮替换img。

var img = $('#test');

img.on('load', function(e){
    alert('Success!');
}).on('error', function(e) {
    $('#test').replaceWith('<button>click me</button>');
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="col-md-4 col-sm-6 fashion photography showcase" data-rel="lightcase">
    <a href="img/sale.png"  data-rel="lightcase"class="portfolio_item">
    <img id="test" src="img/womenn.png" alt="alt text"class="img-responsive">
    <div class="portfolio_item_hover">
        <div class="portfolio-border clearfix">
            <div class="item_info"> <span>Women's Style </span> <em>Fashion</em>
            </div>
        </div>
     </div>
     </a>
</div>

您可以添加按钮而不是“ alt”文本吗？

2 个答案: