简体   繁体   English

蓝色背景中的白色插图文字

[英]White inset text in blue background

I see a lot of inset text, but none of it's white. 我看到了很多插图文字,但都不是白色的。 I want to have white inset text with a blue background. 我想要带有蓝色背景的白色插图文字。 How is it done? 怎么做?

This is what I have so far, but can't seem to get the text to inset (also see fiddle below). 这是我到目前为止的内容,但似乎无法使文本插入(另请参见下面的小提琴)。

HTML: HTML:

<body>
  <div>
    <h1><a href=#>H</a>
    E
    L
    L
    O
    </h1>
  </div>
</body>

CSS: CSS:

    body {
        font-family: 'Sigmar One', cursive;
        font-size: 100px;
        color: white;
        text-shadow: 4px 4px 4px #000;

        background-color:#0047B2;

        width: 100%;
        height: 100%;
        margin: 0;
    }


    div {
        position:absolute; 
        height:100%; 
        width:100%;
        display: table;
    }

    h1 {
        display: table-cell;
        vertical-align: middle;
        text-align:center;
    }

    a:visited, a:hover, a:active {
        text-decoration: none;
        color: white;
    }

    a:link {
        text-decoration: none;

        text-shadow: 0px 2px 3px rgba(255,255,255,.25);
        -webkit-background-clip: text;
           -moz-background-clip: text;
                background-clip: text;
    }

    a:hover {
        text-shadow: 4px 4px 4px #000;
        color: white;
    }

http://jsfiddle.net/8Huu7/1/ http://jsfiddle.net/8Huu7/1/

i would use a paint program and make the background blue and then add white text to the background and save the image and then use that image as the background of your webpage. 我会使用一个绘画程序,使背景为蓝色,然后将白色文本添加到背景并保存图像,然后将该图像用作您的网页背景。

it shouldn't be that hard. 不应该那么难。

eg body background="background1.png" 例如body background =“ background1.png”

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM