图片内的文章答案

【问题标题】：Article within the image图片内的文章
【发布时间】：2018-04-26 18:40:30
【问题描述】：

我想要一些类似的东西（带边框的东西是一张图片，文字有反色，以便于阅读）

请注意，图像是一个简单的 div 标签，将存在于其中

    <div class = "row">
        <div class = "col-md-6">
            <h3>Title</h3>
            <p>
                Short and nice paragraph
            </p>
        </div>
    </div>

但是我不知道从哪里开始。我尝试阅读引导教程，但它们提供的内容不多。我知道我没有提供任何代码来展示我的工作，但老实说，我什至不知道从哪里开始，或者搜索什么或做什么。所以我并不是真的要求一个完整的解决方案或任何东西，但如果你能指出我正确的方向，我将非常感激

【问题讨论】：

标签： html css twitter-bootstrap-3

【解决方案1】：

给你

.col-md-6{
width:50%;
}

.image{
position:relative;
}



.image img{
width: 300px;
}

.text{
position:absolute;
top: 50%;
left: 0;
padding: 0 25px;
background: rgba(255,255,255,.6);
}

.text h3, .text p{
color:#f63;
}

<div class="row">
    <div class="col-md-6">
        <div class="image">
            <div class="text"><h3>Title</h3>
            <p>
                Short and nice paragraph
            </p>
            </div>
            <img src="https://i.pinimg.com/736x/51/d6/e3/51d6e3dcccd3bdac300202a5a3e99de0--pretty-cats-beautiful-cats.jpg">
            </div>
    </div>
</div>

【讨论】：

正是我想要的！无论如何，我可以像这里一样使文本反转？ i.stack.imgur.com/p5ULG.png
如果你想使用 css 来反转文本颜色，请访问这个link 但是，如果你想使用 java 脚本，请使用这个（最佳答案）link。
棒极了，流行/复古风格吧？
yip yip，但仍有待观察。我只是在学习如何编写 CSS，我一生都在做后端和桌面的东西，所以这个新奇的网络东西很有趣。

【解决方案2】：

Quillion，我不明白你的问题是什么。上面的代码应该呈现几乎你想要的东西。不过，这可能对您有所帮助：

我将您的代码包装在主容器 .container-fluid 和 .card 元素中，两者都可以在引导文档中找到。

我刚刚为更宽的边框添加了一种额外的样式。你可以玩一点，应该很快就能得到你需要的风格。这是笔的链接：https://codepen.io/scheinercc/pen/pdwdvx

希望对您有所帮助。

<style>
    .custom-border-width-3 {
        border-width: 3px;
    }
<style>

<div class="container-fluid">
    <div class="row">
        <div class="col-md-6">
            <div class="card mt-2 custom-border-width-3">
                <div class="card-body">
                    <h1>Title</h1>
                    <p>
                        Short and nice paragraph
                    </p>
                </div>
            </div>
        </div>
    </div>
</div>

【讨论】：

谢谢，我希望边框部分实际上是图像，其中的文本是反色文本（以便于阅读）。抱歉解释不佳，我更新了问题