【问题标题】:Replace the border with the image用图片替换边框
【发布时间】:2015-12-17 08:15:14
【问题描述】:

边框甚至显示为图片,因为它是为整个块完成的。但是,我想隐藏边框以免出现在图像周围。我该怎么办?

<div style="border: 1px solid #000">
    <div class="row">
        <div class="col-xs-24">
            <div style="background-image: url('young.png'); min-height:200px;"></div>
        </div>
    </div>
    <div class="row">
        <div class="col-xs-24">
            <div class="">
                The entire paragraph text is here.
            </div>
        </div>
    </div>
</div>

示例:https://jsfiddle.net/f28zraee/

【问题讨论】:

  • 把边框放在第二“行”而不是整个块周围?
  • 是的,这是一种方法。我想知道是否有更好的方法来完成它。
  • 您究竟想要在哪里设置边框 - 只在文本块周围?
  • 可以添加"
    placehold.it/238x159.jpg');最小高度:200px;边距:-1px -1px 0 -1px">
    "

标签: html twitter-bootstrap css twitter-bootstrap-3


【解决方案1】:

你有错误元素周围的边框,见小提琴。 https://jsfiddle.net/f28zraee/1/

<div>
    <div class="row">
        <div class="col-xs-24">
            <div style="background-image: url('http://placehold.it/238x159.jpg'); min-height:200px;"></div>
        </div>
    </div>
    <div class="row">
        <div class="col-xs-24">
            <div style="border: 1px solid #000; border-top: none;">
                The entire paragraph text is here.
            </div>
        </div>
    </div>
</div>

【讨论】:

    【解决方案2】:

    将样式属性从第一行移到第二个row&lt;div&gt; 标记中:

    <div>
        <div class="row">
            <div class="col-xs-24">
                <div style="background-image: url('young.png'); min-height:200px;"></div>
            </div>
        </div>
        <div class="row" style="border: 1px solid #000">
            <div class="col-xs-24">
                <div class="">
                    The entire paragraph text is here.
                </div>
            </div>
        </div>
    </div>
    

    编辑: 这是小提琴:https://jsfiddle.net/ye4pn0oz/

    反对的理由是什么?

    【讨论】:

    • 因为你只说对了一半!引自 OP 的问题“但是,我想隐藏边框以免出现在图像周围。”现在,当您进行编辑时,您的答案将与我的完全一样...所以您的答案不再好,对不起。
    • @AdamBuchananSmith Yours 是 2 分钟后 - 我无法预测未来。我会说,我们同时写的,但我也可以说你的——这是什么逻辑?
    • 即使我在一天后写我的也没关系。你只回答了一半的问题。我要说的是,如果您修改答案以完全回答问题,那么您将应对我的问题。那有什么意义呢?
    • 或者你看不出我们和我的区别吗?
    • @AdamBuchananSmith 当然我看到了区别。你想要什么? OP 可以决定他想要的任何东西,但是因为我同时写了一个相似(但不相等)的答案,所以你对我投反对票有什么意义?
    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 2016-01-01
    • 2013-03-03
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2017-04-16
    相关资源
    最近更新 更多