精华内容
下载资源
问答
  • 获得网页的背景色和字体颜色,方法如下:思想: 通过取得颜色属性值得到的是 rgb 色,不是我们想要的,所以需要将 rgb 色装换为 十六进制色 ,首先获得rgb色 :var rgb = document.getElementById('color').style....

    获得网页的背景色和字体颜色,方法如下:

    思想: 通过取得颜色属性值得到的是 rgb 色,不是我们想要的,所以需要将 rgb 色装换为 十六进制色 ,首先获得rgb色 :

    var rgb = document.getElementById('color').style.backgroundColor;

    得到格式如下: rgb(225, 22, 23); 然后进行拆分:

    var rgb = rgb.split('(')[1]; //拆分后为 [rgb, 225,22,23)]形式,长度为2的数组

    再将 (225,22,23)字符串进行拆分(注意:只有number类型的才能转换,所以用 parseInt 强制转换类型!) :

    for(var k = 0; k < 3; k++){

    str[k] = parseInt(rgb .split(',')[k]).toString(16);//str 数组保存拆分后的数据

    }

    最后的组合:

    str = '#'+str[0]+str[1]+str[2];

    整个代码如下:

    getHexColor js/jQuery 获得十六进制颜色

    function getHexBgColor(){

    var str = [];

    var rgb = document.getElementById('color').style.backgroundColor.split('(');

    for(var k = 0; k < 3; k++){

    str[k] = parseInt(rgb[1].split(',')[k]).toString(16);

    }

    str = '#'+str[0]+str[1]+str[2];

    document.getElementById('color').innerHTML = str;

    }

    function getHexColor(){

    var str = [];

    var rgb = document.getElementById('color').style.color.split('(');

    for(var k = 0; k < 3; k++){

    str[k] = parseInt(rgb[1].split(',')[k]).toString(16);

    }

    str = '#'+str[0]+str[1]+str[2];

    document.getElementById('color').innerHTML = str;

    }

    #color{

    width: 200px;

    height: 200px;

    line-height: 200px;

    text-align: center;

    }

    展开全文
  • /** * 深色颜色加一点浅一点颜色的阴影 */ text-shadow: 1px 1px rgba(calc(var(--red) + 50), calc(var(--green) + 50), calc(var(--blue) + 50), calc((var(--lightness) - 0.5) * 9999)); /** * 确定边框透明度...

    CSS:

    :root {

    /* 定义RGB变量 */

    --red: 44;

    --green: 135;

    --blue: 255;

    /**

    * 使用sRGB Luma方法计算灰度(可以看成亮度)

    * 算法为:

    * lightness = (red * 0.2126 + green * 0.7152 + blue * 0.0722) / 255

    */

    --lightness: calc((var(--red) * 0.2126 + var(--green) * 0.7152 + var(--blue) * 0.0722) / 255);=

    }

    .btn {

    font-size: 150%;

    padding: .5em 2em;

    border: .2em solid;

    }

    .btn {

    /* 按钮背景色就是基本背景色 */

    background: rgb(var(--red), var(--green), var(--blue));

    /**

    * --lightness亮度和0.5对比

    * 大于,则正数,和-999999%相乘,会得到一个巨大负数,浏览器会按照边界0%渲染,也就是亮度为0,于是颜色是黑色;

    * 小于,则和-999999%相乘,会得到一个巨大的正数,以最大合法值100%渲染,于是颜色是白色;

    */

    color: hsl(0, 0%, calc((var(--lightness) - 0.5) * -999999%));

    /**

    * 深色颜色加一点浅一点颜色的阴影

    */

    text-shadow: 1px 1px rgba(calc(var(--red) + 50), calc(var(--green) + 50), calc(var(--blue) + 50), calc((var(--lightness) - 0.5) * 9999));

    /**

    * 确定边框透明度。

    * 如果亮度比0.8大,在说明按钮背景色比较淡,我们出现一个深色边框;

    * 如果亮度比较小,说明按钮背景色较深,没有必要出现边框。

    此时,计算后为负值,透明度小于0的时候,浏览器会按照0渲染,因此,边框透明。

    */

    /* 设置边框相关样式 */

    border-color: rgba(calc(var(--red) - 50), calc(var(--green) - 50), calc(var(--blue) - 50), calc((var(--lightness) - 0.8) * 100));

    }

    input {

    vertical-align: middle;

    margin-right: 10px;

    }

    .c-r::after {

    counter-reset: red var(--red);

    content: counter(red);

    }

    .c-g::after {

    counter-reset: green var(--green);

    content: counter(green);

    }

    .c-b::after {

    counter-reset: blue var(--blue);

    content: counter(blue);

    }

    展开全文
  • html,button的背景色和文字颜色

    万次阅读 多人点赞 2017-07-06 11:36:51
    新建 background-color表示背景色 color表示文字颜色
                <button type="button" class="btn"  style="background-color: #7ED321;width: 76px;height: 36px;color: #FFFFFF">
                    新建
                </button>
    background-color表示背景色
    color表示文字的颜色
    
     

     

    更多企业内的技术应用和使用技巧,请移步至我的公众号【程序员实用技能】

    图片

    展开全文
  • html输入框文字颜色_HTML5颜色输入

    千次阅读 2020-08-20 03:15:42
    html输入框文字颜色Currently supported in all modern browsers with the exception of Safari and Internet Explorer, the potential of the color HTML5 input is great, allowing the user to make any color ...

    html输入框文字颜色

    Currently supported in all modern browsers with the exception of Safari and Internet Explorer, the potential of the color HTML5 input is great, allowing the user to make any color selection in a form:

    目前,除Safari和Internet Explorer之外,所有现代浏览器均支持该功能, color HTML5输入的潜力很大,允许用户以以下形式进行任何颜色选择:

    用途 (Uses)

    Color is a great way to allow the personalization of webpages: for example, prompting the user to choose the background and foreground colors of the site to suit their personal tastes, or for accessibility purposes, to make a website look better under conditions of color blindness.

    颜色是允许个性化网页的一种好方法:例如,提示用户选择网站的背景和前景色以适合他们的个人喜好,或出于可访问性的目的,使网站在色盲条件下看起来更好。 。

    Like the <progress> input, the default appearence of the color dialog is strongly dependant on the browser and its underlying operating system.

    <progress>输入一样,颜色对话框的默认外观在很大程度上取决于浏览器及其底层操作系统。

    句法 (Syntax)

    The code for the color input is an excellent demonstration of how HTML5 elements gracefully degrade in older browsers. Typical code for the color input looks like:

    color输入代码很好地演示了HTML5元素如何在较旧的浏览器中正常降级。 color输入的典型代码如下:

    <label for="background" accesskey="c" >Select background color:</label>
    <input type="color" name="background" id="background" value="#ff0000">

    If you’ve written HTML forms before you’ll know that any input type that is not understood by a browser is interpreted as <input type="text" >. That is, <input type="generic"> will generate a simple text input. So if the browser does not understand <input type="color">, it will default to a text input, with #ff0000 as the default value in the example above.

    如果您已经编写了HTML表单,那么您将知道浏览器无法理解的任何输入类型都将解释为<input type="text" > 。 也就是说, <input type="generic">将生成一个简单的文本输入。 因此,如果浏览器不理解<input type="color"> ,它将默认为文本输入,在上面的示例中默认值为#ff0000

    As a result, the user (assuming they know hexadecimal color) will be able to enter their desired hue by hand, while browsers that do understand the input will render it completely, with the value of the input used as the default color in the picker.

    其结果是,用户(假设他们知道十六进制颜色 )就能进入手动他们所需的色调,而那些理解输入浏览器将彻底使其与value用作选择器的默认颜色输入。

    响应颜色变化 (Responding To Color Changes)

    Using the selected color is very simple. Taking the code from the example above:

    使用所选颜色非常简单。 从上面的示例中获取代码:

    <label for="bgcolor">Select the (temporary) background color for this page:</label>
    <input type="color" value="#ff0000" id="bgcolor" name="bgcolor" oninput="changeBackground(bgcolor.value)">

    We can apply the following piece of JavaScript:

    我们可以应用以下JavaScript:

    function changeBackground(colorValue){
    	document.body.style.backgroundColor = colorValue;
    }

    Note that current browser behaviour has similar issues to the range input: Chrome will change the background color of the page in response to a onchange event, but Firefox will not alter the background until after after the color picker is closed. To make browser behaviour the same, I have chosen to fire the function oninput.

    请注意,当前的浏览器行为与range输入具有类似的问题:Chrome会响应onchange事件来更改页面的背景颜色,但是Firefox直到关闭颜色选择器之后才会更改背景。 为了使浏览器行为相同,我选择了触发函数oninput

    If you wanted to make the background color semi-permanent, you could write the new color value into a cookie or LocalStorage.

    如果要使背景颜色为半永久性,可以将新的颜色值写入cookie或LocalStorage。

    限制色井选择 (Restricting Color Well Selection)

    By default the “well” that appears offers the user the entire color gamut to choose from. With the same principle as the range input, the user’s choices can be directed to just a few colors by using a <datalist> with appropriate <option> values:

    默认情况下,显示的“颜色”为用户提供了整个色域可供选择。 使用与range输入相同的原理,通过使用具有适当<option>值的<datalist> ,可以将用户的选择仅定向为几种颜色:

    <input type="color" value="#333333" list="colors">
    <datalist id=colors>
    	<option>#ffffff</option>
    	<option>#ff0000</option>
    	<option>#ff7700</option>
    </datalist>

    If you’re using Chrome, you can see the result below:

    如果您使用的是Chrome,则可以看到以下结果:

    Limited color well selection example
    有限色井选择示例

    As this behaviour is part of the spec, I expect other browsers to follow in supporting it presently.

    由于此行为是规范的一部分,因此我希望其他浏览器也可以支持该行为。

    重要笔记 (Important Notes)

    • The default value of the <value> input should never be pure black, as some color picker dialogs will use this value to show a completely saturated black in the popup, with no immediately obvious method of change. Use any other color to provide a visual hint to the user that the hue, luminosity and saturation can be altered.

      <value>输入的默认value 不应为纯黑色 ,因为某些颜色选择器对话框将使用此值在弹出窗口中显示完全饱和的黑色,而没有立即显而易见的更改方法。 使用任何其他颜色向用户提供视觉提示,即可以更改其色相,亮度和饱和度。

    • Right now the value attribute for the input only takes hexadecimal colors reliably. These must be full-length values: shortcuts such as #f00 won't work as defaults.

      现在,输入的value属性仅可靠地采用十六进制颜色。 这些必须是全长值:诸如#f00快捷方式将无法用作默认值。

    与其他浏览器的书写兼容性 (Writing compatibility for other browsers)

    Gaining support in Safari and IE takes one of two approaches: either validating the value with the Constraint API:

    获得Safari和IE的支持采用以下两种方法之一:使用Constraint API验证值:

    <input type="text" value="#ffffff" id="bgcolor" pattern="^#([A-Fa-f0-9]{6})$" required title="Hexadecimal value required">

    … or wiring in a JavaScript polyfill to create an equivalent behaviour: examples include Spectrum and color polyfill.

    …或在JavaScript polyfill中进行布线以创建等效的行为:例如Spectrumcolor polyfill

    翻译自: https://thenewcode.com/588/The-HTML5-Color-Input

    html输入框文字颜色

    展开全文
  • (如果是有道理的)Bootstrap下拉菜单文字颜色我用this site(< < < ---链接,我使用CSS),以帮助一些CSS,但我似乎无法找到合适的代码块改变的颜色正确的文字。当您压缩网页以显示折叠菜单并进入下拉列表时...
  • HTML文字颜色与排版 1、HTML中颜色表示法 三种表示方法: (1)直接用英文单词表示,例如:white(白色) (2)以六位十六进制表示,例如:#ffffff(白色) (3)以RGB模式表示,也就是用3个0至255之间的数字来分别表示...
  • html链接文字颜色怎么设置定义a标签的css属性即可。 例如:文字颜色 在css中写上a{color: #000;} (#号后面是颜色值) 如果单独定义一条a标签,可以先找前面的div,写a样式的时候,带上div的命名。 如 文字颜色 在css...
  • html设置文字颜色白色的方法:1、通过外部CSS样式来设置;2、通过内部CSS样式来设置,代码为【style="color:white;font-size:25px】;3、通过font标签来设置。本教程操作环境:windows7系统、html5版,DELL G3电脑。...
  • Html设置超链接文字颜色

    万次阅读 2015-12-22 22:39:41
    为了突出超链接,超链接文字通常采用与其他文字不同的颜色,超链接文字的下端还会加一条横线。网页的超链接文字有默认颜色,在默认情况下,浏览器以蓝色作为超链接文字颜色,访问过的文字颜色变成暗红色。在标记...
  • 解压密码:RJ4587 之前我们已经分享过不少HTML5文字特效,效果都还不错,尤其是这款HTML5摆动的文字特效 类似...今天我们要分享一款HTML5 3D文字特效,文字颜色是渐变的,同时有文字阴影,更加凸显了3D立体的效果。
  • 1.列表文字颜色 在创建列表时,可以单独对某个列表设置文字颜色,这种设置样式的方式即为行内样式表。 语法: <li><font color="颜色值">列表项</font></li> 示例代码: <!DOCTYPE ...
  • 主要介绍了JS实现改变HTML文字颜色和内容的方法,涉及JS数学运算与页面元素动态操作相关技巧,需要的朋友可以参考下
  • input-placeholderhtml5为input添加了原生的占位符属性placeholder,高级浏览器都支持这个属性,例如:默认的placeholder字体颜色是呈浅灰色,如果想改变这个默认颜色,解决方案如下:input:-moz-placeholder,...
  • html中我们经常要用到css样式来美化html标签的一些不足之处,例如文字颜色。下面本篇文章就来给大家介绍一下使用CSS设置文字颜色的方法,希望对大家有所帮助。在CSS中,我们可以通color属性来设置文本颜色。该属性...
  • android中通过HTML设置文字颜色和字号

    千次阅读 2015-12-30 12:00:21
    textview.setText(Html.fromHtml("之后的文字颜色会改变" + "" + 这里文字颜色改变 + "" + "" + 这里文字大小改变+ "")); 文字大小改变还可以用small,但是效果都不理想,建议使用SpannableString来做文字字号控制...
  • 通过HTML方式设置文字颜色和字体

    千次阅读 2015-12-30 11:52:42
    textview.setText(Html.fromHtml("后面颜色就变了"+"" + 文字颜色 + "" + "" + 字体加粗 + "")); 但是文字字体加粗和缩小效果不好,使用SpannableString会更好一些;单从改变部分文字的颜色还是听方便的。
  • 几乎在每个网页中都会出现有超链接,它是跳转到另一个页面的入口,可是通常超链接部分文字的颜色都是默认的,如何去改变颜色达到更美观的效果呢,下面我就总结了几篇关于如何设置超链接文字颜色的文章:1.Html中如何...
  • html设置文字颜色白色的方法:1、通过外部CSS样式来设置;2、通过内部CSS样式来设置,代码为【style="color:white;font-size:25px】;3、通过font标签来设置。本教程操作环境:windows7系统、html5版,DELL G3电脑。...
  • html设置文字颜色白色的方法:1、通过外部CSS样式来设置;2、通过内部CSS样式来设置,代码为【style="color:white;font-size:25px】;3、通过font标签来设置。本教程操作环境:windows7系统、html5版,DELL G3电脑。...
  • 昨天的报告页面,想要实现根据不同文字内容改变字体颜色,效果图: 调试了半天出不来效果,最后请教了前端,上代码: 1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <...
  • 文字的颜色  文字颜色设置格式如下:  …  这里的颜色值可以是一个十六进制数(用“#”作为前缀),也可以是以下16种颜色名称。
  • 本文实例讲述了JS实现改变HTML文字颜色和内容的方法。分享给大家供大家参考,具体如下:1. JavaScript Day 1 // to change the color of an object.function changeColor(){x=document.getElementById("Id1");x....
  • html5设置文字颜色灰色的方法:使用属性【text-shadow】向文本设置阴影,语法为【object.style.textShadow=“2px 2px #ff0000”】。本教程操作环境:windows7系统、html5版,DELL G3电脑。html5设置文字颜色灰色的...
  • html中我们经常要用到css样式来美化html标签的一些不足之处,例如文字颜色。那么如何用css将文字改为红色?下面本篇文章就来给大家介绍一下,希望对大家有所帮助。在CSS中,我们可以通color属性来设置文本文字颜色...
  • js 特效 html 特效 背景及文字颜色的改变
  • HTML文字排版和颜色表示

    千次阅读 2013-12-18 10:29:29
    HTML文字排版和颜色表示 学习目的:   能够利用一些基本的和文字、段落相关的标签制作各种格式的由文字组成的网页,例如个人简历、日记、诗词等。   HTML中颜色表示方法:   1、直接用英文单词来表示颜色...
  • (ByVal hdc As Long, ByVal x As Long, ByVal y As Long, ByVal lpString As String, ByVal nCount As Long) As Long 'lngColor = 颜色 strMsg=显示文字 Public Sub StatusBarX(ByVal lngColor As Long, Optional ...
  • 今天在群里看到群友问了一个这样的问题,就是如何更改placeholder属性中文字颜色,以前用过这属性,却是没更改过颜色,于是便试了试,中途遇到些问题,查找资料后特来总结一下。  熟悉HTML5的人应该都知道,...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 5,157
精华内容 2,062
关键字:

html文字颜色