- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
我必须将 Logo 的分辨率更改为至少能够看到 Logo (格式为 3400x1716)到 99x50 以重叠图片并添加带有 Logo 的文本。
我将应该叠加的图片设置为 300 高度和 100% 宽度以填充页面的其余部分,但这在我的代码中显示。
最终产品将是我将能够将鼠标悬停在图片/ Logo 上并显示文本。
我的问题是我看不到 Logo ,也看不到应该叠加图片的文字。
总共有 12 张图片,有 12 种不同的文字,但标志相同。
.portfolio-items-wrapper {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
}
.portfolio-item-wrapper {
position: relative;
}
.portfolio-img-background {
height: 300px;
width: 100%;
background-size: cover;
background-position: center;
background-repeat: no-repeat;
}
.img-text-wrapper {
position: absolute;
top: 0;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
height: 100%;
text-align: center;
padding-left: 100%;
padding-right: 100%;
}
<div class="content-wrapper">
<div class="portfolio-items-wrapper">
<div class="portfolio-item-wrapper">
<div class="portfolio-img-background" style="background- image:url(images/portfolio1.jpg)"></div>
<div class="img-text-wrapper">
<div class="logo-wrapper">
<img src="images/logos/thought.png">
</div>
<div class="subtitle">
Using a different approach than the NORM!
</div>
</div>
</div>
<div class="portfolio-item-wrapper">
<div class="portfolio-img-background" style="background- image:url(images/portfolio2.jpg)"></div>
<div class="img-text-wrapper">
<div class="logo-wrapper">
<img src="images/logos/thought.png">
</div>
<div class="subtitle">
Everything starts with a THOUGHT!
</div>
</div>
</div>
</div>
</div>
最佳答案
您可以使用您开始使用的方法,即为您的父容器元素设置背景图像,然后您可以使用 flexbox 定位文本和 Logo 元素。
img {
width:50px;height:50px;
}
div {
background-image:url('https://static-cse.canva.com/image/1578/RoyalBlue_Set1_23.5dfc6872.png');
background-size:contain;
background-repeat:no-repeat;
background-position:center center;
width:300px;height:300px;
display:flex;align-items:center;flex-direction:column;justify-content:center;
color:#FFF;font-size:36px;
}
<div>
<img src="https://assets.codepen.io/5200861/internal/avatars/users/default.png">
<h3>some text here</h3>
</div>
关于html - 为什么叠加的图片和标志+文字不起作用?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/64542369/
我有两个维度 DimFlag 和 DimPNL 以及一个事实表 FactAmount 。我正在寻找:当 pnl 是 stat(Is Stat=1) 时:sum (Actual x FlagId)对于
我试图弄清楚登录模块标志在 JAAS 中是如何工作的(使用 JBoss 5.1 EAP),我遇到了一个令人费解的情况,我希望有人能为我澄清一下。 对于背景,我的 login-config.xml 如下
关闭。这个问题是off-topic .它目前不接受答案。 想改进这个问题吗? Update the question所以它是on-topic用于堆栈溢出。 关闭 9 年前。 Improve this
我正在通过 gradle 使用 doclet 运行 javadoc,当我运行 javadoc/doclet 任务时,我收到下一个错误: error - invalid flag: -doctitle
我尝试使用sqoop --where标志将特定的行从MySQL表导入到HDFS,但是结果不符合预期。 命令: sqoop import \ --connect "jdbc:mysql://XXXX
我有一个语言面板,其中有一个图像 (main-image),显示页面加载时的情况。我还有三个额外的图像,它们在页面加载时隐藏。 问题是当点击附加图像之一时如何切换主图像。我需要使用单击的 image
奇怪...在 StackOverflow 上有很多关于此 attr 的问题,但没有人回答我的以下问题: 我有一个span(仅作为示例),其中启用了ContentEditable。我只想保存更改的元素(
我正在使用 ChartJS 2.0 在 UI 上绘制图表。而且我能够呈现饼图。但我希望鼠标悬停时显示数据以及“%”符号。我如何追加 % 因此,如果在鼠标悬停时我得到 Rented: 93 我想看到 R
我使用的是 Servlet 3.0,我想用 HttpOnly 标志保护我的 cookie。我的 web.xml 是 true
我有一个简单的服务: public class TestService extends Service { final String LOG_TAG = "myLogs"; public void o
我正在尝试将 wget 与包含“#”符号的 url 一起使用。无论我做什么来逃避这个角色,它都不起作用。我用过\、' 和 "。但它们都不起作用。有人有什么建议吗? 谢谢! 最佳答案 如果您真的想让它有
我正在尝试创建一个数据库,但我不知道如何转义数据库名称中的 - 符号。 mysql> create database happy-face; 给我一个错误 mysql> create databa
我为我的计算机科学类(class)编写了一个程序,它读取一个文件并导入数据,然后只添加数字,但它似乎添加了一个额外的加号。 import java.io.*; //necessary for File
可能是个愚蠢的问题,但我怎样才能在与某些文本看到图像相同的行中获取图像(在本例中为标志)? 到目前为止我的 HTML 代码: FRA 最佳答案 试试这个: img { height:20px
我需要一些有关 clone() 系统调用的帮助。我试图将它与标志 CLONE_CHILD_CLEARTID 一起使用,但我看不到我指定为参数的字段值有任何变化。这是一个简单的代码: int the_c
查看 mySQL 转储时,我遇到了一些东西,想知道它们是什么。 我明白了: /*!50001 DROP TABLE IF EXISTS `xxx` */; flag 50001是什么意思,有什么意思的
是否可以传递任何 Java 编译器标志来告诉编译器不允许使用原始类型?也就是说,对于任何泛型类,让编译器强制使用参数化版本,否则抛出编译错误? 最佳答案 JDK7 (b38) 介绍 -Xlint:ra
[Flags] public enum MyEnum { None = 0, Setting1 = (1 GetAllEnums() where T : struct
我正在浏览 PackageManager API。我发现定义了以下常量: 1) GET_DISABLED_COMPONENTS 2) GET_DISABLED_UNTIL_USED_COMPONENT
我编写了一个 Go 程序来模拟按键操作。为此,我必须使用 cgo 和不同的 C 代码片段,具体取决于正在编译 Go 代码的操作系统。我编写的代码如下所示: package keyboard /* #i
我是一名优秀的程序员,十分优秀!