自定义 CSS 颜色叠加
我正在尝试为公司徽标编写一些 CSS，该徽标相当准确地描述了 jpg 当前位于公司服务器上。除了徽标上的一些颜色叠加之外，它非常基本。
我的问题是： 这可能吗？如果是这样，我该怎么做，
请不要抨击，我是一个十足的菜鸟，我的第一行 html 是大约一周前...
这是我的标记
<html>
<head>
<meta charset="utf-8"/>
<title>
</title>
<link rel="stylesheet" href="css/stylesheet.css"
</head>
<style contenteditable="">
#infinity {
position: absolute;
width: 212px;
height: 100px;
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
transform: rotate(-45deg);
}
#infinity:before,
#infinity:after {
content: "";
position: absolute;
top: 0;
left: 0;
width: 60px;
height: 60px;
border: 15px solid;
-moz-border-radius: 50px 50px 0 50px;
border-radius: 50px 50px 0 50px;
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
transform: rotate(-45deg);
}
#infinity:before{
color: #ADB2B3;
}
#infinity:after {
left: auto;
right: 15;
color: #A99055;
-moz-border-radius: 50px 50px 50px 0;
border-radius: 50px 50px 50px 0;
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
}
</style>
<body>
<br>
<br>
<div>
<div>
<div style="float:left; margin-right: 0px;"id="infinity">
</div>
<div>
<p style="float:left; margin-top:70px; margin-left:130px; font-size:60px;
font-family: Avenir, sans-serif;">
PORTFOLIO
</p>
</div>
</div>
</body>
</html>
I am trying to write up some CSS for a company logo that is a fairly accurate depiction of the jpg currently on the company server. its pretty basic except for some color overlays on the logo.
My question is:
is this even possible? if so how can i go about doing so
please dont bash, im a total noob, my first line of html was about a week ago...
Here is my markup
<html>
<head>
<meta charset="utf-8"/>
<title>
</title>
<link rel="stylesheet" href="css/stylesheet.css"
</head>
<style contenteditable="">
#infinity {
position: absolute;
width: 212px;
height: 100px;
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
transform: rotate(-45deg);
}
#infinity:before,
#infinity:after {
content: "";
position: absolute;
top: 0;
left: 0;
width: 60px;
height: 60px;
border: 15px solid;
-moz-border-radius: 50px 50px 0 50px;
border-radius: 50px 50px 0 50px;
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
transform: rotate(-45deg);
}
#infinity:before{
color: #ADB2B3;
}
#infinity:after {
left: auto;
right: 15;
color: #A99055;
-moz-border-radius: 50px 50px 50px 0;
border-radius: 50px 50px 50px 0;
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
}
</style>
<body>
<br>
<br>
<div>
<div>
<div style="float:left; margin-right: 0px;"id="infinity">
</div>
<div>
<p style="float:left; margin-top:70px; margin-left:130px; font-size:60px;
font-family: Avenir, sans-serif;">
PORTFOLIO
</p>
</div>
</div>
</body>
</html>
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（3）
看看这个： http://jsfiddle.net/tMEqk/1/
它不完全在那里，但是更接近的是，
我制作了一个相对定位的容器，然后从那里抽出每个循环，根据盒子放置所有东西。更改边框以获得连续效果，然后遮盖金色框生成的对角线。也没有旋转，但如果你想改变大小，就需要做一些数学运算。是在 Chrome 下测试的，其他浏览器还没测试过。
编辑
我并不完全容忍这种行为，但我确实喜欢尝试重新创造它。这确实应该是一个图像，您可以通过将其保存并引用为本地文件来防止图像损坏。
Check this out: http://jsfiddle.net/tMEqk/1/
It's not quite there, but it's closer
I made a relatively positioned container and then drew out each loop from there, positioned everything according to the box. Changed the border to get the continuous effect and then obscured the diagonal line generated by a gold box. There's no rotation either, but if you want to change the size there's a little bit of math to be done. Did it in Chrome, haven't checked other browsers yet.
Edit
I'm not exactly condoning this, but I did enjoy trying to recreate it. This really should be an image, and you can prevent the broken image by saving and referencing it as a local file.
就这样我就直了。您正在尝试使用 CSS 创建整个徽标吗？这是正确的吗？如果是这样，为什么使用 CSS 而不是使用 JPEG？如果你直接使用 CSS，你能做的事情将会受到限制，而且大部分都是 CSS3 和浏览器 hack，这会带来一些问题。
第一个是 CSS3 仅在现代浏览器中受支持。
第二个是浏览器黑客无法通过 W3 CSS 验证。
Just so I am straight. You are trying to create the entire logo with CSS? Is this correct? If so, why CSS versus using the JPEG? If you are using straight CSS you will be limited to what you can do, also most of it would be CSS3 and browser hacks, which poses a couple of problems.
The first being CSS3 is only supported in modern browsers.
The second being browser hacks don't pass W3 CSS validation.
这实际上不是一个答案，但我强烈建议您最多可以尝试使用 Inkscape 或此类程序从该徽标中制作可扩展的矢量图像。该徽标将很容易转换为 SVG（可缩放矢量图形）。但正如 Kris 所说，使用 CSS 来完成所有这一切在许多情况下可能无法达到预期效果。
This is not an answer, really, but I would strongly suggest that you can at most try to make a scalable vector image out of that logo, using Inkscape or such programs. This logo will be very easy to convert to SVG (scalable vector graphics). But as Kris said, using CSS to accomplish all of this may not perform as intended in many situations.