我在一些网站上看到你可以使用"data"关键字在CSS中包含图像:

.stuff {
  background: transparent url(data:image/gif;base64,SOMEWEIRDCODEHERE) repeat center top;
}

奇怪的代码看起来像base64 ecoded字符串,如:

R0lGODlhMwAxAIAAAAAAAP /// yH5BAAAAAAALAAAAAAzADEAAAK8jI + pBr0PowytzotTtbm/DTqQ6C3hGX ElcraA9jIr66ozVpM3nseUvYP1UEHF0FUUHkNJxhLZfEJNvol06tzwrgd LbXsFZYmSMPnHLB + zNJFbq15 + SOf50 + 6rG7lKOjwV1ibGdhHYRVYVJ9Wn k2HWtLdIWMSH9lfyODZoZTb4xdnpxQSEF9oyOWIqp6gaI9pI1Qo7BijbF ZkoaAtEeiiLeKn72xM7vMZofJy8zJys2UxsCT3kO229LH1tXAAAOw ==

看起来很酷:D

我想知道如何才能包含像这样的透明1x1像素GIF？有谁知道这样的图像的数据代码？

为小型和非常常见的图像做这个是一个好主意吗？所有浏览器都支持这个吗？

我一直相信(虽然我现在怀疑这些信念的有效性):

div.name

速度比:

.name

但是我最近读到大多数CSS选择器引擎从右到左读取,在这种情况下第一个例子实际上不会更慢？因为选择器引擎会简单地找到每个具有一个名称类的元素,然后必须识别哪些是divs？

CSS选择器引擎通常以哪种方式读取？从左到右还是从右到左？如果他们一般从右到左阅读,有人可以请我解释为什么(我看不出在选择引擎方面从右到左阅读是否有意义)？

我使用ruby注释为日文文本添加假名:

<ruby><rb>?</rb><rt>??</rt></ruby><ruby><rb>?</rb><rt>?</rt></ruby>

当我尝试选择汉字并在Safari或Chrome中复制时,剪贴板如下所示:

?
??
?

我也无法从OS X的字典中查找单词.

有没有办法阻止选择假名？rt { -webkit-user-select: none; }似乎不起作用.

我正在尝试创建一个小菜单,当您单击它时会打开,当您在外部单击时会关闭.我设法做到了,主要是.我按下打开菜单的按钮有一些填充,当我专门点击填充时,打开的菜单会选择所有文本,这很奇怪,我不明白为什么会发生这种情况.我查看了MDN的文档,我最喜欢的搜索引擎和IRC(freenode)的解决方案,但到目前为止还没有运气.

我做了一个最小的工作示例,我链接到底部,我添加了一些注释,可以评论一些行来改变行为.简单地说,你可以按蓝色方块,字母'a'将显示为选中,预期的行为是字母'a'应该显示,但未选中.如果您了解发生了什么,请告诉我.^ _ ^

编辑:我看到一些关于不同浏览器的不同结果的讨论.我目前在Linux上使用64位的Firefox 59.0.1(Fedora 27).有人建议这可能是一个错误,我无法排除这一点.

https://jsfiddle.net/16k672tt/4/

function outside_function(event) {
    var outside = event.target;
    outside.classList.remove("outside");
    var menu_list = document.getElementById("menu-list");
    menu_list.classList.remove("menu-list-open");
    event.stopPropagation();
  }
  var outside = document.getElementById("outside");
  outside.addEventListener("click", outside_function);

  function menu_click_event(event) {
    var menu_list = document.getElementById("menu-list");
    var outside = document.getElementById("outside");
    menu_list.classList.add("menu-list-open");
    outside.classList.add("outside");
    event.stopPropagation();
  }
  var menu = document.getElementById("menu");
  menu.addEventListener("click", menu_click_event);

.menu {
  /* If you comment the next line, it renders the way I expect */
  display: flex;
  width: 2.5rem;
  height: 2.5rem;
  background-color: #0000ff80;
}

.outside {
  position: fixed;
  top: …

可能重复:
css规则禁用文本选择突出显示

如何在DIV中禁用突出显示(选择)文本？

<div id="hello">hello</div>

是否有一个轻量级的CSS或Javascript片段,只允许我在页面上选择/突出显示只对文本可用的内容？当你试图突出显示文字并最终突出显示div和图像和事物时,它总是让我恼火.

有没有办法只突出文字？这将包括段落,锚点,div和图像内的文本以及所有标题标记.

谢谢!〜杰克逊

我正在上传任何回答这个问题的结果,我现在正在运行@Nick Radford的ETA代码.

在这里它是,并且它更接近,除了使用ctrl + a的文本之外仍然有很多选择:http: //designsweeter.com/

我的页面的一部分需要双击,这会产生不良影响,有时用户会无意中突出显示页面上的某些文本.

它真的很乱,但除了使用图像而不是文本之外,还有一种巧妙的方法可以阻止这种情况发生吗？

谢谢

我正在尝试为Windows Phone 7/7.5编写一个简单的HTML 5应用程序.我有一个HTML5页面,其画布几乎与屏幕大小相同.当我单击/点击屏幕时,选择了画布.我不希望这种行为,但我仍然希望能够点击/点击各种控件.有没有办法没有这种行为？以下是显示效果的屏幕截图的链接.

我试图在正文中使用CSS删除该行为.到目前为止,没有任何工作.

body {
    /* disable selections / cut copy paste actions */
    -moz-user-select: none;
    -khtml-user-select: none;
    -webkit-user-select: none;
    -ms-user-select: none;
    user-select: none;

    /* disable callout, image save panel on long press */
    -webkit-touch-callout: none;

    /* "turn off" link highlight, good for custom pressed states */
    -webkit-tap-hightlight-color: transparent;
}

提前感谢您的帮助!

背景

希望禁用突出显示表的第一列.

HTML源码

<table>
<tbody>
    <tr><td class="unselectable" unselectable="on"><button value="1" unselectable="on" class="unselectable"><div unselectable="on" class="unselectable">&#x2718;</div></button></td><td>Row 1</td></tr>
    <tr><td class="unselectable" unselectable="on"><button value="2" unselectable="on" class="unselectable"><div unselectable="on" class="unselectable">&#x2718;</div></button></td><td>Row 2</td></tr>
    <tr><td class="unselectable" unselectable="on"><button value="3" unselectable="on" class="unselectable"><div unselectable="on" class="unselectable">&#x2718;</div></button></td><td>Row 3</td></tr>
</tbody>
</table>

CSS来源

*.unselectable {
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: -moz-none;
  -ms-user-select: none;
  user-select: none;
}

小提琴

http://jsfiddle.net/2LQfg/1/

问题

当用户选择并在表格上拖动鼠标按钮时,按钮文本(✘)将突出显示(不良行为).当用户复制并粘贴值时,不包括值(✘)(所需行为).

澄清一下,这是当前的行为(不受欢迎的):

下图显示了在表格中拖动鼠标后所需的行为:

大多数用户可能不会关心,但这是一种有点误导性的用户体验.无论用户突出显示文本并将其复制,都应该复制所有突出显示的文本.通过添加unselectable类,按钮的(✘)值会突出显示,但不会被复制.用户根本不应该突出显示(选择)(✘),因为它被设置为unselectable.

环境

我在Xubuntu上使用Firefox 19.0.2,但我寻求跨浏览器解决方案.

题

什么是跨浏览器方式来阻止用户突出显示第一个表列(包含按钮)？

有关

• 如何禁用使用CSS突出显示文本？
• 有没有办法让DIV无法选择？
• 使用CSS或其他非JS方法模仿"onselectstart = return false"？
• http://www.mindfiresolutions.com/Using-of-onselectstart-and-its-alternative-for-Firefox-239.php
• http://therelentlessfrontend.com/2010/02/13/how-to-disable-text-selection-in-a-table/

我有一个指令,它呈现一个HTML表,其中每个td元素都有一个id

我想要完成的是使用它mousedown.dragselect/mouseup.dragselect来确定选择了哪些元素,然后突出显示那些选定的元素.到目前为止我所拥有的是这样的:

var $ele = $(this);
scope.bindMultipleSelection = function() {
  element.bind('mousedown.dragselect', function() {
    $document.bind('mousemove.dragselect', scope.mousemove);
    $document.bind('mouseup.dragselect', scope.mouseup);
  });
};

scope.bindMultipleSelection();

scope.mousemove = function(e) {
  scope.selectElement($(this));
};

scope.mouseup = function(e) {
};

scope.selectElement = function($ele) {
  if (!$ele.hasClass('eng-selected-item'))
    $ele.addClass('eng-selected-item'); //apply selection or de-selection to current element
};

如何获取每个td元素mousedown.dragselect,并能够获取它们然后突出显示它们？