自定义 CSS 颜色叠加答案

【问题标题】：Custom CSS color overlay自定义 CSS 颜色叠加
【发布时间】：2014-12-02 18:17:36
【问题描述】：

我正在尝试为公司徽标编写一些 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>

【问题讨论】：

如果由于某种原因不能成为图像.. 使用 HTML5 Canvas？

标签： html css shapes css-shapes graphical-logo

【解决方案1】：

看看这个：http://jsfiddle.net/tMEqk/1/

它不完全在那里，但它更接近

我做了一个相对定位的容器，然后从那里抽出每个循环，根据盒子定位所有东西。更改边框以获得连续效果，然后将金色盒子生成的对角线进行模糊处理。也没有旋转，但如果你想改变大小，需要做一些数学运算。在 Chrome 中做过，还没有检查其他浏览器。

编辑我并不完全宽恕这一点，但我确实喜欢尝试重新创建它。这确实应该是一个图像，您可以通过将其保存为本地文件并将其引用来防止损坏的图像。

【讨论】：

在 Firefox 6+ 中工作。在 IE8 中制作一些整洁的正方形 :-)
在我的 iPad 上工作...您先生是 CSS 大师！
谢谢！好玩。我回答你的问题了吗？
如果这回答了您的问题，您能否单击左侧的绿色复选标记？谢谢
我浏览了我的历史记录，发现我从来没有给过你回答的功劳。对此感到抱歉

【解决方案2】：

所以我是直的。您正在尝试使用 CSS 创建整个徽标？这个对吗？如果是这样，为什么选择 CSS 而不是使用 JPEG？如果您使用纯 CSS，您将受限于您能做的事情，而且大部分是 CSS3 和浏览器 hack，这会带来一些问题。

第一个是 CSS3，只有现代浏览器才支持。第二个是浏览器黑客没有通过 W3 CSS 验证。

【讨论】：

是的，如果您查看我原始帖子中的链接，您会发现我基本上已经完成了这项壮举……除了正确的着色
好吧对不起，我误解了你的问题。因此，问题在于颜色问题。对吗？
是的，着色有点复杂，所以我不知道从哪里开始
@BrandonOgle 不要继续讨论这个问题，但我同意 Kris 的观点。 CSS 不是绘图程序，它用于设置元素的样式，而不是绘制任何东西。
我知道这有点不合常规，在这种情况下不使用 href 就好了。大部分时间都将离线查看，我更喜欢对徽标进行 css 渲染，而不是丑陋的缺失图像框

【解决方案3】：

这不是一个答案，真的，但我强烈建议您最多可以尝试使用 Inkscape 或此类程序从该徽标制作可缩放的矢量图像。这个标志将很容易转换为 SVG（可缩放矢量图形）。但正如 Kris 所说，在许多情况下，使用 CSS 来完成所有这些可能无法按预期执行。

【讨论】：