html - 为什么颜色#e67d22e1 不会在 Safari 中显示?
问题描述
出于某种原因,颜色#e67d22e1
不会显示在我的特定网站中的特定text
,borders
和btn
字体中sections
。
我已经在 Chrome 和 Firefox 中测试过这个问题,但由于某种原因,即使使用prefix's
,它也不会在 Safari 中显示颜色。
我真的很感激任何可能的帮助,以及对该网站的建设性批评。这是我的第一个项目。
:-)
-webkit-text-fill-color: #e67d22e1;
-webkit-background-color: #e67d22e1;
-webkit-border: #e67d22e1;
-webkit-border-bottom: #e67d22e1;
/* UNIVERSAL */
*,
*::before,
*::after {
margin: 0;
padding: 0;
-webkit-box-sizing: border-box;
box-sizing: border-box;
color: #fff;
}
html,
body {
font-family: sans-serif;
line-height: 1.5;
scroll-behavior: smooth;
overflow-x: hidden;
}
h1 {
font-size: 2.5rem;
}
h2 {
font-size: 2rem;
}
h3 {
font-size: 1.375rem;
}
h4 {
font-size: 1.125rem;
}
h5 {
font-size: 1rem;
}
h6 {
font-size: 0.875rem;
}
p {
font-size: 1.125rem;
}
ul {
list-style: none;
}
a {
text-decoration: none;
}
/* PAGE-CONTAINER */
.page-container {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
width: 100%;
max-width: 1140px;
margin-right: auto;
margin-left: auto;
}
/* HEADER-SECTION */
#main-nav ul {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
-ms-flex-direction: row;
flex-direction: row;
-webkit-box-pack: end;
-ms-flex-pack: end;
justify-content: flex-end;
margin-right: 2rem;
}
#main-nav li {
margin: 1rem;
}
#main-nav a {
text-transform: uppercase;
color: #fff;
font-weight: 700;
}
#main-nav a:hover {
margin-right: 0.4rem;
color: #e67d22e1;
}
header {
background-image: -webkit-gradient(linear, left top, left bottom, from(rgba(0, 0, 0, 0.6)), to(rgba(0, 0, 0, 0.6))),
url("/img/chopping-board/chopping-board-bg.jpg");
background-image: -webkit-linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6)),
url("/img/chopping-board/chopping-board-bg.jpg");
background-image: -o-linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6)),
url("/img/chopping-board/chopping-board-bg.jpg");
background-image: linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6)),
url("/img/chopping-board/chopping-board-bg.jpg");
background-size: cover;
background-repeat: no-repeat;
width: 100%;
height: 600px;
-webkit-border-bottom: 4px solid #e67d22e1;
border-bottom: 4px solid #e67d22e1;
}
.hero-text {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
justify-items: center;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-ms-flex-line-pack: center;
align-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
text-align: center;
margin-top: 8rem;
margin-right: auto;
margin-left: auto;
padding: 1.5rem;
}
.hero-text h3 {
margin-top: 0.5rem;
}
.hero-text p {
margin-top: 1rem;
}
.hero-text .btn {
-webkit-background-color: #e67d22e1;
background-color: #e67d22e1;
padding: 1rem;
border-radius: 8px;
margin-top: 2rem;
}
.hero-text .btn:hover {
background-color: transparent;
-webkit-border: 1px solid #e67d22e1;
border: 1px solid #e67d22e1;
}
/* SERVICES-SECTION */
.services {
width: 100%;
height: 650px;
background-color: #eee;
}
.services-heading {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
text-align: center;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
justify-items: center;
-ms-flex-line-pack: center;
align-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
margin-right: auto;
margin-left: auto;
padding: 1.5rem;
}
.underline {
-webkit-border: 2px solid #e67d22e1;
border: 2px solid #e67d22e1;
width: 100px;
text-align: center;
margin-right: auto;
margin-left: auto;
margin-top: 1rem;
margin-bottom: 1rem;
}
.services h1,
.services h3,
.services .underline {
-webkit-text-fill-color: #e67d22e1;
color: #e67d22e1;
}
/* CARDS */
.cards {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
-ms-flex-direction: row;
flex-direction: row;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
width: 100%;
margin-left: auto;
margin-right: auto;
padding: 1.5rem;
}
.card {
background-color: #fff;
-webkit-border: 1px solid #e67d22e1;
border: 1px solid #e67d22e1;
margin-left: 1rem;
width: 250px;
height: 350px;
-webkit-box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.2), 0 5px 5px 0 rgba(0, 0, 0, 0.24);
box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.2), 0 5px 5px 0 rgba(0, 0, 0, 0.24);
-webkit-transition: all .2s;
-o-transition: all .2s;
transition: all .2s;
}
.card:hover {
-webkit-transform: scale(1.1);
-ms-transform: scale(1.1);
transform: scale(1.1);
}
.card h3,
.card p {
-webkit-text-fill-color: #e67d22e1;
color: #e67d22e1;
text-align: center;
margin-right: auto;
margin-left: auto;
padding: 1.5rem;
}
#card-icon {
-webkit-background-color: #e67d22e1;
background-color: #e67d22e1;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
margin-right: auto;
margin-left: auto;
border-radius: 2rem;
text-align: center;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
justify-items: center;
width: 4rem;
height: 4rem;
font-size: 2rem;
}
/* MENU-GALLERY-SECTION */
.menu {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
width: 100%;
height: 650px;
background-color: #fff;
-webkit-border-bottom: 4px solid #e67d22e1;
border-bottom: 4px solid #e67d22e1;
}
.gallery-container {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
-ms-flex-direction: row;
flex-direction: row;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
width: 100%;
height: 650px;
padding: 1.5rem;
}
.gallery-container img {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
-ms-flex-direction: row;
flex-direction: row;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
width: 250px;
height: 250px;
margin-right: auto;
margin-left: auto;
margin-top: 1.5rem;
-webkit-border: 1px solid #e67d22e1;
border: 1px solid #e67d22e1;
-webkit-box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.2), 0 5px 5px 0 rgba(0, 0, 0, 0.24);
box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.2), 0 5px 5px 0 rgba(0, 0, 0, 0.24);
-webkit-transition: all .2s;
-o-transition: all .2s;
transition: all .2s;
}
.gallery-container img:hover {
-webkit-transform: scale(1.1);
-ms-transform: scale(1.1);
transform: scale(1.1);
}
/* ABOUT-SECTION */
.about {
background-image: -webkit-gradient(linear, left top, left bottom, from(rgba(0, 0, 0, 0.6)), to(rgba(0, 0, 0, 0.6))),
url("/img/chef/chef-3.jpg");
background-image: -webkit-linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6)),
url("/img/chef/chef-3.jpg");
background-image: -o-linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6)),
url("/img/chef/chef-3.jpg");
background-image: linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6)),
url("/img/chef/chef-3.jpg");
background-size: cover;
background-repeat: no-repeat;
width: 100%;
height: 900px;
-webkit-border-bottom: 4px solid #e67d22e1;
border-bottom: 4px solid #e67d22e1;
}
.about img {
width: 300px;
height: 300px;
border-radius: 50%;
border: 8px solid rgba(255, 255, 255, 0.226);
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
margin-right: auto;
margin-left: auto;
margin-top: 2rem;
}
.about h1,
.about h3 {
text-align: center;
padding: 1.5rem;
}
.orange {
-webkit-text-fill-color: #e67d22e1;
color: #e67d22e1;
}
.red {
-webkit-text-fill-color: #ff0000;
color: #ff0000;
}
/* FOOTER-SECTION */
footer {
width: 100;
height: 400px;
background-color: #000;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
justify-items: center;
-ms-flex-line-pack: center;
align-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
text-align: center;
}
#top-icon,
.email,
.phone,
#instagram,
.copyright {
margin-right: auto;
margin-left: auto;
}
#top-icon {
font-size: 4rem;
}
.email,
.phone {
margin-top: 0.5rem;
}
#instagram {
font-size: 4rem;
margin-top: 0.5rem;
}
#instagram:hover {
-webkit-text-fill-color: #e67d22e1;
color: #e67d22e1;
}
footer .copyright {
margin-top: 0.5rem;
}
解决方案
这取决于您使用的版本。在旧版本的 Safari 中不支持具有透明度的 rgba 或十六进制。
代替 8 位十六进制颜色,您可以使用普通颜色并选择所需的元素并为其添加透明度。
推荐阅读
- php - 如何用树枝预填充选择表单字段
- python - 试图在我的 Python 字典中找到每个组的最大值
- excel - 仅当另一列中至少有 3 条记录时才显示该列的总和
- javascript - 有没有办法从弹性搜索索引中获取最近的位置值?
- python - 对象没有属性
- flutter - 有没有办法将下载进度侦听器添加到 CachedNetworkImage() 以在单独的小部件中显示 CircularProgressIndicator() ?
- node.js - 如何将 textarea 的图像 url 保存到数据库?
- javascript - google.script.host.close 不是函数/自动关闭弹出窗口
- javascript - 如何在没有 [innerHTML] 的情况下显示段落中的链接
- python - Python 值错误。发酵地块需要更多的工作