如何实现用于devexpress控制的自定义单选按钮图像

Question

如何为mvc devexpress单选按钮实现自定义按钮？

他们用于单选按钮的图像文件上有多个按钮，我无法看到他们如何选择已选中的单选按钮。

我尝试用自定义图片覆盖此样式，但它将图像放在单选按钮的整个背景上。

正在调用的样式来自此处

.dxeButtonEditButtonHover_MetropolisBlue .dxEditors_edtDropDown_MetropolisBlue, .dxeButtonEditButtonHover_MetropolisBlue .dxEditors_edtEllipsis_MetropolisBlue, .dxeButtonEditButtonPressed_MetropolisBlue .dxEditors_edtDropDown_MetropolisBlue, .dxeButtonEditButtonPressed_MetropolisBlue .dxEditors_edtEllipsis_MetropolisBlue, .dxEditors_caRefresh_MetropolisBlue, .dxEditors_edtCalendarFNNextYear_MetropolisBlue, .dxEditors_edtCalendarFNPrevYear_MetropolisBlue, .dxEditors_edtCalendarNextMonth_MetropolisBlue, .dxEditors_edtCalendarNextMonthDisabled_MetropolisBlue, .dxEditors_edtCalendarNextYear_MetropolisBlue, .dxEditors_edtCalendarNextYearDisabled_MetropolisBlue, .dxEditors_edtCalendarPrevMonth_MetropolisBlue, .dxEditors_edtCalendarPrevMonthDisabled_MetropolisBlue, .dxEditors_edtCalendarPrevYear_MetropolisBlue, .dxEditors_edtCalendarPrevYearDisabled_MetropolisBlue, .dxEditors_edtDETSClockFace_MetropolisBlue, .dxEditors_edtDETSHourHand_MetropolisBlue, .dxEditors_edtDETSMinuteHand_MetropolisBlue, .dxEditors_edtDETSSecondHand_MetropolisBlue, .dxEditors_edtDropDown_MetropolisBlue, .dxEditors_edtDropDownDisabled_MetropolisBlue, .dxEditors_edtEllipsis_MetropolisBlue, .dxEditors_edtEllipsisDisabled_MetropolisBlue, .dxEditors_edtError_MetropolisBlue, .dxEditors_edtRadioButtonChecked_MetropolisBlue, .dxEditors_edtRadioButtonCheckedDisabled_MetropolisBlue, .dxEditors_edtRadioButtonUnchecked_MetropolisBlue, .dxEditors_edtRadioButtonUncheckedDisabled_MetropolisBlue, .dxEditors_edtSpinEditDecrementImage_MetropolisBlue, .dxEditors_edtSpinEditDecrementImageDisabled_MetropolisBlue, .dxEditors_edtSpinEditIncrementImage_MetropolisBlue, .dxEditors_edtSpinEditIncrementImageDisabled_MetropolisBlue, .dxEditors_edtSpinEditLargeDecImage_MetropolisBlue, .dxEditors_edtSpinEditLargeDecImageDisabled_MetropolisBlue, .dxEditors_edtSpinEditLargeIncImage_MetropolisBlue, .dxEditors_edtSpinEditLargeIncImageDisabled_MetropolisBlue, .dxEditors_edtTBDecBtn_MetropolisBlue, .dxEditors_edtTBDecBtnDisabled_MetropolisBlue, .dxEditors_edtTBDecBtnHover_MetropolisBlue, .dxEditors_edtTBDecBtnPressed_MetropolisBlue, .dxEditors_edtTBIncBtn_MetropolisBlue, .dxEditors_edtTBIncBtnDisabled_MetropolisBlue, .dxEditors_edtTBIncBtnHover_MetropolisBlue, .dxEditors_edtTBIncBtnPressed_MetropolisBlue, .dxEditors_edtTokenBoxTokenRemoveButton_MetropolisBlue, .dxEditors_edtTokenBoxTokenRemoveButtonHover_MetropolisBlue, .dxEditors_fcadd_MetropolisBlue, .dxEditors_fcaddhot_MetropolisBlue, .dxEditors_fcgroupaddcondition_MetropolisBlue, .dxEditors_fcgroupaddgroup_MetropolisBlue, .dxEditors_fcgroupand_MetropolisBlue, .dxEditors_fcgroupnotand_MetropolisBlue, .dxEditors_fcgroupnotor_MetropolisBlue, .dxEditors_fcgroupor_MetropolisBlue, .dxEditors_fcgroupremove_MetropolisBlue, .dxEditors_fcopany_MetropolisBlue, .dxEditors_fcopbegin_MetropolisBlue, .dxEditors_fcopbetween_MetropolisBlue, .dxEditors_fcopblank_MetropolisBlue, .dxEditors_fcopcontain_MetropolisBlue, .dxEditors_fcopend_MetropolisBlue, .dxEditors_fcopequal_MetropolisBlue, .dxEditors_fcopgreater_MetropolisBlue, .dxEditors_fcopgreaterorequal_MetropolisBlue, .dxEditors_fcopless_MetropolisBlue, .dxEditors_fcoplessorequal_MetropolisBlue, .dxEditors_fcoplike_MetropolisBlue, .dxEditors_fcopnotany_MetropolisBlue, .dxEditors_fcopnotbetween_MetropolisBlue, .dxEditors_fcopnotblank_MetropolisBlue, .dxEditors_fcopnotcontain_MetropolisBlue, .dxEditors_fcopnotequal_MetropolisBlue, .dxEditors_fcopnotlike_MetropolisBlue, .dxEditors_fcremove_MetropolisBlue, .dxEditors_fcremovehot_MetropolisBlue, .dxeFocused_MetropolisBlue .dxeTBHSys .dxeFocusedMDHSys .dxEditors_edtTBMainDH_MetropolisBlue, .dxeFocused_MetropolisBlue .dxeTBHSys .dxeFocusedMDHSys .dxEditors_edtTBMainDHHover_MetropolisBlue, .dxeFocused_MetropolisBlue .dxeTBHSys .dxeFocusedMDHSys .dxEditors_edtTBMainDHPressed_MetropolisBlue, .dxeFocused_MetropolisBlue .dxeTBHSys .dxeFocusedSDHSys .dxEditors_edtTBSecondaryDH_MetropolisBlue, .dxeFocused_MetropolisBlue .dxeTBHSys .dxeFocusedSDHSys .dxEditors_edtTBSecondaryDHHover_MetropolisBlue, .dxeFocused_MetropolisBlue .dxeTBHSys .dxeFocusedSDHSys .dxEditors_edtTBSecondaryDHPressed_MetropolisBlue, .dxeFocused_MetropolisBlue .dxeTBVSys .dxeFocusedMDHSys .dxEditors_edtTBMainDH_MetropolisBlue, .dxeFocused_MetropolisBlue .dxeTBVSys .dxeFocusedMDHSys .dxEditors_edtTBMainDHHover_MetropolisBlue, .dxeFocused_MetropolisBlue .dxeTBVSys .dxeFocusedMDHSys .dxEditors_edtTBMainDHPressed_MetropolisBlue, .dxeFocused_MetropolisBlue .dxeTBVSys .dxeFocusedSDHSys .dxEditors_edtTBSecondaryDH_MetropolisBlue, .dxeFocused_MetropolisBlue .dxeTBVSys .dxeFocusedSDHSys .dxEditors_edtTBSecondaryDHHover_MetropolisBlue, .dxeFocused_MetropolisBlue .dxeTBVSys .dxeFocusedSDHSys .dxEditors_edtTBSecondaryDHPressed_MetropolisBlue, .dxeSpinDecButtonHover_MetropolisBlue .dxEditors_edtSpinEditDecrementImage_MetropolisBlue, .dxeSpinDecButtonPressed_MetropolisBlue .dxEditors_edtSpinEditDecrementImage_MetropolisBlue, .dxeSpinIncButtonHover_MetropolisBlue .dxEditors_edtSpinEditIncrementImage_MetropolisBlue, .dxeSpinIncButtonPressed_MetropolisBlue .dxEditors_edtSpinEditIncrementImage_MetropolisBlue, .dxeSpinLargeDecButtonHover_MetropolisBlue .dxEditors_edtSpinEditLargeDecImage_MetropolisBlue, .dxeSpinLargeDecButtonPressed_MetropolisBlue .dxEditors_edtSpinEditLargeDecImage_MetropolisBlue, .dxeSpinLargeIncButtonHover_MetropolisBlue .dxEditors_edtSpinEditLargeIncImage_MetropolisBlue, .dxeSpinLargeIncButtonPressed_MetropolisBlue .dxEditors_edtSpinEditLargeIncImage_MetropolisBlue, .dxeTBHSys .dxEditors_edtTBMainDH_MetropolisBlue, .dxeTBHSys .dxEditors_edtTBMainDHDisabled_MetropolisBlue, .dxeTBHSys .dxEditors_edtTBMainDHHover_MetropolisBlue, .dxeTBHSys .dxEditors_edtTBMainDHPressed_MetropolisBlue, .dxeTBHSys .dxEditors_edtTBSecondaryDH_MetropolisBlue, .dxeTBHSys .dxEditors_edtTBSecondaryDHDisabled_MetropolisBlue, .dxeTBHSys .dxEditors_edtTBSecondaryDHHover_MetropolisBlue, .dxeTBHSys .dxEditors_edtTBSecondaryDHPressed_MetropolisBlue, .dxeTBVSys .dxEditors_edtTBMainDH_MetropolisBlue, .dxeTBVSys .dxEditors_edtTBMainDHDisabled_MetropolisBlue, .dxeTBVSys .dxEditors_edtTBMainDHHover_MetropolisBlue, .dxeTBVSys .dxEditors_edtTBMainDHPressed_MetropolisBlue, .dxeTBVSys .dxEditors_edtTBSecondaryDH_MetropolisBlue, .dxeTBVSys .dxEditors_edtTBSecondaryDHDisabled_MetropolisBlue, .dxeTBVSys .dxEditors_edtTBSecondaryDHHover_MetropolisBlue, .dxeTBVSys .dxEditors_edtTBSecondaryDHPressed_MetropolisBlue {
background-color: rgba(0, 0, 0, 0);
background-image: url("/DXR.axd?r=0_1730-t6j38");
background-repeat: no-repeat;

}

Answer 1

使用CSS精灵时，您需要指定background-position以定位特定的图标或图像。

例如：

.dxeButtonEditButtonHover_MetropolisBlue .dxEditors_edtDropDown_MetropolisBlue, .dxeButtonEditButtonHover_MetropolisBlue .dxEditors_edtEllipsis_MetropolisBlue, .dxeButtonEditButtonPressed_MetropolisBlue .dxEditors_edtDropDown_MetropolisBlue, .dxeButtonEditButtonPressed_MetropolisBlue .dxEditors_edtEllipsis_MetropolisBlue, .dxEditors_caRefresh_MetropolisBlue, .dxEditors_edtCalendarFNNextYear_MetropolisBlue, .dxEditors_edtCalendarFNPrevYear_MetropolisBlue, .dxEditors_edtCalendarNextMonth_MetropolisBlue, .dxEditors_edtCalendarNextMonthDisabled_MetropolisBlue, .dxEditors_edtCalendarNextYear_MetropolisBlue, .dxEditors_edtCalendarNextYearDisabled_MetropolisBlue, .dxEditors_edtCalendarPrevMonth_MetropolisBlue, .dxEditors_edtCalendarPrevMonthDisabled_MetropolisBlue, .dxEditors_edtCalendarPrevYear_MetropolisBlue, .dxEditors_edtCalendarPrevYearDisabled_MetropolisBlue, .dxEditors_edtDETSClockFace_MetropolisBlue, .dxEditors_edtDETSHourHand_MetropolisBlue, .dxEditors_edtDETSMinuteHand_MetropolisBlue, .dxEditors_edtDETSSecondHand_MetropolisBlue, .dxEditors_edtDropDown_MetropolisBlue, .dxEditors_edtDropDownDisabled_MetropolisBlue, .dxEditors_edtEllipsis_MetropolisBlue, .dxEditors_edtEllipsisDisabled_MetropolisBlue, .dxEditors_edtError_MetropolisBlue, .dxEditors_edtRadioButtonChecked_MetropolisBlue, .dxEditors_edtRadioButtonCheckedDisabled_MetropolisBlue, .dxEditors_edtRadioButtonUnchecked_MetropolisBlue, .dxEditors_edtRadioButtonUncheckedDisabled_MetropolisBlue, .dxEditors_edtSpinEditDecrementImage_MetropolisBlue, .dxEditors_edtSpinEditDecrementImageDisabled_MetropolisBlue, .dxEditors_edtSpinEditIncrementImage_MetropolisBlue, .dxEditors_edtSpinEditIncrementImageDisabled_MetropolisBlue, .dxEditors_edtSpinEditLargeDecImage_MetropolisBlue, .dxEditors_edtSpinEditLargeDecImageDisabled_MetropolisBlue, .dxEditors_edtSpinEditLargeIncImage_MetropolisBlue, .dxEditors_edtSpinEditLargeIncImageDisabled_MetropolisBlue, .dxEditors_edtTBDecBtn_MetropolisBlue, .dxEditors_edtTBDecBtnDisabled_MetropolisBlue, .dxEditors_edtTBDecBtnHover_MetropolisBlue, .dxEditors_edtTBDecBtnPressed_MetropolisBlue, .dxEditors_edtTBIncBtn_MetropolisBlue, .dxEditors_edtTBIncBtnDisabled_MetropolisBlue, .dxEditors_edtTBIncBtnHover_MetropolisBlue, .dxEditors_edtTBIncBtnPressed_MetropolisBlue, .dxEditors_edtTokenBoxTokenRemoveButton_MetropolisBlue, .dxEditors_edtTokenBoxTokenRemoveButtonHover_MetropolisBlue, .dxEditors_fcadd_MetropolisBlue, .dxEditors_fcaddhot_MetropolisBlue, .dxEditors_fcgroupaddcondition_MetropolisBlue, .dxEditors_fcgroupaddgroup_MetropolisBlue, .dxEditors_fcgroupand_MetropolisBlue, .dxEditors_fcgroupnotand_MetropolisBlue, .dxEditors_fcgroupnotor_MetropolisBlue, .dxEditors_fcgroupor_MetropolisBlue, .dxEditors_fcgroupremove_MetropolisBlue, .dxEditors_fcopany_MetropolisBlue, .dxEditors_fcopbegin_MetropolisBlue, .dxEditors_fcopbetween_MetropolisBlue, .dxEditors_fcopblank_MetropolisBlue, .dxEditors_fcopcontain_MetropolisBlue, .dxEditors_fcopend_MetropolisBlue, .dxEditors_fcopequal_MetropolisBlue, .dxEditors_fcopgreater_MetropolisBlue, .dxEditors_fcopgreaterorequal_MetropolisBlue, .dxEditors_fcopless_MetropolisBlue, .dxEditors_fcoplessorequal_MetropolisBlue, .dxEditors_fcoplike_MetropolisBlue, .dxEditors_fcopnotany_MetropolisBlue, .dxEditors_fcopnotbetween_MetropolisBlue, .dxEditors_fcopnotblank_MetropolisBlue, .dxEditors_fcopnotcontain_MetropolisBlue, .dxEditors_fcopnotequal_MetropolisBlue, .dxEditors_fcopnotlike_MetropolisBlue, .dxEditors_fcremove_MetropolisBlue, .dxEditors_fcremovehot_MetropolisBlue, .dxeFocused_MetropolisBlue .dxeTBHSys .dxeFocusedMDHSys .dxEditors_edtTBMainDH_MetropolisBlue, .dxeFocused_MetropolisBlue .dxeTBHSys .dxeFocusedMDHSys .dxEditors_edtTBMainDHHover_MetropolisBlue, .dxeFocused_MetropolisBlue .dxeTBHSys .dxeFocusedMDHSys .dxEditors_edtTBMainDHPressed_MetropolisBlue, .dxeFocused_MetropolisBlue .dxeTBHSys .dxeFocusedSDHSys .dxEditors_edtTBSecondaryDH_MetropolisBlue, .dxeFocused_MetropolisBlue .dxeTBHSys .dxeFocusedSDHSys .dxEditors_edtTBSecondaryDHHover_MetropolisBlue, .dxeFocused_MetropolisBlue .dxeTBHSys .dxeFocusedSDHSys .dxEditors_edtTBSecondaryDHPressed_MetropolisBlue, .dxeFocused_MetropolisBlue .dxeTBVSys .dxeFocusedMDHSys .dxEditors_edtTBMainDH_MetropolisBlue, .dxeFocused_MetropolisBlue .dxeTBVSys .dxeFocusedMDHSys .dxEditors_edtTBMainDHHover_MetropolisBlue, .dxeFocused_MetropolisBlue .dxeTBVSys .dxeFocusedMDHSys .dxEditors_edtTBMainDHPressed_MetropolisBlue, .dxeFocused_MetropolisBlue .dxeTBVSys .dxeFocusedSDHSys .dxEditors_edtTBSecondaryDH_MetropolisBlue, .dxeFocused_MetropolisBlue .dxeTBVSys .dxeFocusedSDHSys .dxEditors_edtTBSecondaryDHHover_MetropolisBlue, .dxeFocused_MetropolisBlue .dxeTBVSys .dxeFocusedSDHSys .dxEditors_edtTBSecondaryDHPressed_MetropolisBlue, .dxeSpinDecButtonHover_MetropolisBlue .dxEditors_edtSpinEditDecrementImage_MetropolisBlue, .dxeSpinDecButtonPressed_MetropolisBlue .dxEditors_edtSpinEditDecrementImage_MetropolisBlue, .dxeSpinIncButtonHover_MetropolisBlue .dxEditors_edtSpinEditIncrementImage_MetropolisBlue, .dxeSpinIncButtonPressed_MetropolisBlue .dxEditors_edtSpinEditIncrementImage_MetropolisBlue, .dxeSpinLargeDecButtonHover_MetropolisBlue .dxEditors_edtSpinEditLargeDecImage_MetropolisBlue, .dxeSpinLargeDecButtonPressed_MetropolisBlue .dxEditors_edtSpinEditLargeDecImage_MetropolisBlue, .dxeSpinLargeIncButtonHover_MetropolisBlue .dxEditors_edtSpinEditLargeIncImage_MetropolisBlue, .dxeSpinLargeIncButtonPressed_MetropolisBlue .dxEditors_edtSpinEditLargeIncImage_MetropolisBlue, .dxeTBHSys .dxEditors_edtTBMainDH_MetropolisBlue, .dxeTBHSys .dxEditors_edtTBMainDHDisabled_MetropolisBlue, .dxeTBHSys .dxEditors_edtTBMainDHHover_MetropolisBlue, .dxeTBHSys .dxEditors_edtTBMainDHPressed_MetropolisBlue, .dxeTBHSys .dxEditors_edtTBSecondaryDH_MetropolisBlue, .dxeTBHSys .dxEditors_edtTBSecondaryDHDisabled_MetropolisBlue, .dxeTBHSys .dxEditors_edtTBSecondaryDHHover_MetropolisBlue, .dxeTBHSys .dxEditors_edtTBSecondaryDHPressed_MetropolisBlue, .dxeTBVSys .dxEditors_edtTBMainDH_MetropolisBlue, .dxeTBVSys .dxEditors_edtTBMainDHDisabled_MetropolisBlue, .dxeTBVSys .dxEditors_edtTBMainDHHover_MetropolisBlue, .dxeTBVSys .dxEditors_edtTBMainDHPressed_MetropolisBlue, .dxeTBVSys .dxEditors_edtTBSecondaryDH_MetropolisBlue, .dxeTBVSys .dxEditors_edtTBSecondaryDHDisabled_MetropolisBlue, .dxeTBVSys .dxEditors_edtTBSecondaryDHHover_MetropolisBlue, .dxeTBVSys .dxEditors_edtTBSecondaryDHPressed_MetropolisBlue {

background-color: rgba(0, 0, 0, 0);
background-image: url("/DXR.axd?r=0_1730-t6j38");
background-repeat: no-repeat;
background-position:{0px -72px}
}

您还可以在CSS中为目标图标大小设置height和width。

进一步阅读：http://css-tricks.com/css-sprites/