asp的线性渐变填充。按键 [英] Linear gradient fill for asp. button

问题描述

Hello Experts，



我们可以填写asp。代码背后的线性渐变颜色的按钮？

意思是用双色填充？



我尝试过：



我在WPF中完成了如下操作。但现在我想在vb.net中获取ASP按钮



'Dim col1GS As New GradientStop（）

'col1GS.Color = DirectCast（ ColorConverter.ConvertFromString（＃CCEEFF），Color）

'col1GS.Offset = 0.0

'twoColorLGB.GradientStops.Add（col1GS）



'Dim col2GS As New GradientStop（）

'col2GS.Color = DirectCast（ColorConverter.ConvertFromString（＃FFDDEE），Color）

'col2GS.Offset = 1.0

'twoColorLGB.GradientStops.Add（col2GS）

'btn.Background = twoColorLGB

解决方案

你见过这个 [ ^ ]？

CSS中的渐变与WPF中的渐变明显不同。虽然可以从代码隐藏中构建和添加相关样式，但在静态CSS文件中创建渐变并通过CSS类将其应用于所需元素会更容易。



CSS3 Gradients [ ^ ]

linear-gradient（） - CSS | MDN [ ^ ]

Ultimate CSS Gradient Generator - ColorZilla.com [ ^ ]



您的示例渐变，包含对旧版浏览器的支持，所需的CSS类似于：

  background： #cceeff;  / *  旧浏览器* /  
 
  / *   IE9 SVG，需要将'filter'条件覆盖为'none'* /  
 背景 URL（数据：图像/ SVG + xml的; BASE64，PD94bWwgdmVyc2lvbj0iMS4wIiA / Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI + CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2NjZWVmZiIgc3RvcC1vcGFjaXR5PSIxIi8 + CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNmZmRkZWUiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ + CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc +）; 
 
  background： -moz-linear-gradient（top，＃ cceeff  0 ％，＃ ffddee  100％）;  / *   FF3.6-15 * /  
  background： -webkit-gradient（linear， left   top ， left   bottom ，color-stop（0％，＃cceeff），color-stop（100％，＃ffddee））;  / *   Chrome4-9，Safari4-5 * /  
  background： -webkit-linear-gradient（top，＃ cceeff  0％，＃ ffddee  100％）;  / *   Chrome10-25，Safari5.1-6 * /  
  background： -o-linear-gradient（top，＃ cceeff  0％，＃ ffddee  100％）;  / *   Opera 11.10-11.50 * /  
  background： -ms-linear-gradient（top，＃ cceeff  0％，＃ ffddee  100％）;  / *   IE10预览* /  
 背景： 线性渐变（至 bottom ，＃ cceeff  0％，＃ ffddee  100％）;  / *   W3C，IE10 +，FF16 +，Chrome26 +，Opera12 +，Safari7 + * /  
 
  filter：  progid：DXImageTransform 。 Microsoft  .gradient（startColorstr ='＃cceeff'，endColorstr ='＃ffddee'，GradientType = 0）;  / *   IE6-8 * /  

如果您可以放弃对旧版本IE的支持，代码会更简单。

您有以下选项：

• 您可以拥有一个静态定义的图像文件可以在你的按钮上使用。如果按钮的大小是可变的，您可以单独垂直或水平拉伸此图像。由于图像是像素位图，因重新采样可能会遇到一些图像质量问题，如果图像大于按钮背景的所有预期尺寸，则可能会出现问题。拉伸的另一个问题可能是通过这种转变使图案变形;您可能会或可能不会关注（我愿意）。
• 您可以使用 System.Drawing 在运行中，根据请求使用 System.Drawing.Bitmap ，可以是按钮文本，访问键，大小和其他所需选项。请参阅：位图类（System.Drawing） [ ^ ]。



如果只请求图片，HTTP响应应该有适当的内容类型，例如image / png。另请参阅：媒体类型 [ ^ ]。



或者，原则上，您可以使用ASP.NET创建一个完整的HTML或其片段，显示按钮。您可以使用自定义渲染以自定义控件的形式进行制作。在所有情况下，您必须动态渲染背景图案，除非您仍然想要拉伸固定图案，正如我在上一项中所述。
• 另一种选择纯粹是客户端。您可以使用HTML5 Canvas动态生成一些图像。请参阅：
  
  Canvas元素 - 维基百科，免费的百科全书 [ ^ ]，
  
  Canvas API - Web API | MDN [ ^ ]。
• 另一种纯粹的客户端方法，Canvas的替代方案可以是SVG元素，它可以直接嵌入HTML5并产生各种交互或动画行为，以及Canvas。它比Canvas有许多优点，例如图形功能和渲染质量：
  
  可缩放矢量图形 - 维基百科，免费的百科全书 [ ^ ]，
  SVG | MDN [ ^ ]。
  
  
  
  很高兴看到这种方法可以产生什么并给人留下深刻的印象：图库 - mbostock / d3 Wiki·GitHub [ ^ ]。
  
  
  
  相当令人鼓舞，不是吗？您可以使用上面演示的电源库，利用JavaScript和HTML5充分利用SVG的所有功能，d3： GitHub - mbostock / d3：用于JavaScript的可视化库HTML和SVG。 [ ^ ]。

最有可能的是，我的建议清单不完整。每种方法都可以用一篇大文章来描述它的特征和主要技术。你必须做一些研究来决定你想要使用什么以及如何使用。

-SA




Hello Experts,

can we fill asp. Button with Linear gradient colors from code behind ?
Meaning filling with double colors?

What I have tried:

I have done in WPF like below . But now I want in vb.net for ASP button

'Dim col1GS As New GradientStop()
'col1GS.Color = DirectCast(ColorConverter.ConvertFromString("#CCEEFF"), Color)
'col1GS.Offset = 0.0
'twoColorLGB.GradientStops.Add(col1GS)

'Dim col2GS As New GradientStop()
'col2GS.Color = DirectCast(ColorConverter.ConvertFromString("#FFDDEE"), Color)
'col2GS.Offset = 1.0
'twoColorLGB.GradientStops.Add(col2GS)
'btn.Background = twoColorLGB

解决方案

Have you seen this[^]?




Gradients in CSS are significantly different to gradients in WPF. Whilst it would be possible to built up and add the relevant styles from the code-behind, it would be much easier to create the gradient in a static CSS file, and apply it to the required elements via a CSS class.

CSS3 Gradients[^]
linear-gradient() - CSS | MDN[^]
Ultimate CSS Gradient Generator - ColorZilla.com[^]

For your example gradient, with support for older browsers included, the required CSS would look something like:

background: #cceeff; /* Old browsers */

/* IE9 SVG, needs conditional override of 'filter' to 'none' */
background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2NjZWVmZiIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNmZmRkZWUiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);

background: -moz-linear-gradient(top, #cceeff 0%, #ffddee 100%); /* FF3.6-15 */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#cceeff), color-stop(100%,#ffddee)); /* Chrome4-9,Safari4-5 */
background: -webkit-linear-gradient(top, #cceeff 0%,#ffddee 100%); /* Chrome10-25,Safari5.1-6 */
background: -o-linear-gradient(top, #cceeff 0%,#ffddee 100%); /* Opera 11.10-11.50 */
background: -ms-linear-gradient(top, #cceeff 0%,#ffddee 100%); /* IE10 preview */
background: linear-gradient(to bottom, #cceeff 0%,#ffddee 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */

filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#cceeff', endColorstr='#ffddee',GradientType=0 ); /* IE6-8 */

If you can drop support for old versions of IE, the code would be simpler.




You have the following options:

• You can have a statically defined image file which you can use on your button. If the size of the button is variable, you can stretch this image, separately vertically or horizontally. As the image is a pixel bitmap, you may face some image quality problems due to re-sample, which can be made not noticeable if your image is bigger than all expected sizes of the button backgrounds. Another problem of the stretch could be the mangling of the pattern by this transform; you may or may not be concerned with that (I would).
• You can create the whole image for a button on a server side using System.Drawing on the fly, using System.Drawing.Bitmap, on request, which could be the button text, access key, sizes, and other required options. Please see: Bitmap Class (System.Drawing)[^].
  
  If only the image is requested, the HTTP response should have appropriate content-type, such as "image/png". See also: Media Types[^].
  
  Or, in principle, you can create a whole HTML or its fragment showing the button with ASP.NET. You can make it in the form of a custom control with custom rendering. In all cases, you will have to render the background pattern on the fly, unless you still want to stretch the fixed pattern, as I described in the previous item.
• Another alternative is purely client-side. You can generated some image on the fly using HTML5 Canvas. Please see:
  Canvas element — Wikipedia, the free encyclopedia[^],
  Canvas API — Web APIs | MDN[^].
• Another purely client-side approach, alternative to Canvas can be SVG element, which can be directly embedded in HTML5 and produce all kinds of interactive or animated behavior, as well as Canvas. It has a number of benefits over Canvas, such as graphical features and rendering quality:
  Scalable Vector Graphics — Wikipedia, the free encyclopedia[^],
  SVG | MDN[^].
  
  It's good to see what this approach can produce and get impressed: Gallery — mbostock/d3 Wiki · GitHub[^].
  
  Quite encouraging, isn't it? You can leverage all the power of SVG with JavaScript and HTML5 using the power library demonstrated above, d3: GitHub - mbostock/d3: A JavaScript visualization library for HTML and SVG.[^].

Most probably, my list of suggestions is incomplete. Each of the approaches can take a whole big article to describe its features and main techniques. You have to do some research to decide what you want to use and how.

—SA




这篇关于asp的线性渐变填充。按键的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！